FileSaver.js 另存为类型不正确

Posted 2023-05-07

【中文标题】FileSaver.js 另存为类型不正确

【英文标题】：FileSaver.js Save as type is incorrect

【发布时间】：2017-11-02 14:59:39

【问题描述】：

我正在开发一个项目，该项目使用 Electron 将 Web 应用程序封装到桌面应用程序。

在这个项目中，我使用 FileSaver.js 将画布内容导出为 png/jpg/pdf。

canvas 转成 base64 图片 base64 图像变成 blob 使用 FileSaver.js 保存 blob 文件

这是保存对话框出现时的样子：

这应该是正常保存为（png 文件）的样子：

这很重要，因为如果用户忘记在文件名末尾插入 .png，文件将无法正常打开。

我该如何解决这个问题？

非常感谢。

【参考方案1】：

我建议使用electron-canvas-to-buffer 包并根据用户的导出选择，创建两个方法并使用电子对话框的filter 进行相应的保存。

对于 pdf，我使用了 jspdf 包。这会将文件保存为您指定的任何文件名。我还添加了一个 sn-p 将画布背景绘制为白色以避免黑色背景。

这是一个简单的例子

var canvasBuffer = require('electron-canvas-to-buffer');
var fs = require('fs');
var jsPDF = require('jspdf');

// your canvas drawing
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// painting the canvas white to prevent black background
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
// drawing
context.fillStyle = 'blue';
context.fillRect(0, 0, 50, 50);
context.fillStyle = 'red';
context.fillRect(50, 10, 30, 20);


// PNG
function savePNG() 
    var buffer = canvasBuffer(canvas, 'image/png');
    dialog.showSaveDialog(
        filters: [
            name: 'png',
            extensions: ['png']
        ]
    , function (fileName) 
        if (fileName === undefined) return;
        fs.writeFile(fileName, buffer, function (err) );
    );

// JPG
function saveJPG() 
  var buffer = canvasBuffer(canvas, 'image/jpg');
  dialog.showSaveDialog(
    
      filters: [
        
          name: 'jpg',
          extensions: ['jpg'],
        ,
      ],
    ,
    (fileName) => 
      if (fileName === undefined) return;
      fs.writeFile(fileName, buffer, (err) => );
    ,
  );

// PDF
function savePDF() 
  // only jpeg is supported by jsPDF
  let imgData = canvas.toDataURL('image/jpeg', 1.0);
  let pdf = new jsPDF();
  pdf.addImage(imgData, 'JPEG', 0, 0);
  pdf.save('test.pdf');

【讨论】：

谢谢@kemotoe。 png 工作正常。 jpg 只显示为黑色。你知道如何用 pdf 做到这一点吗？

@HoangTrinh 更新了我的答案。