FileSaver.js另存为类型不正确

时间:2017-11-02 14:59:39

标签: javascript electron save-as filesaver.js

我正在开发一个使用Electron将Web应用程序打包到桌面应用程序的项目。

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

  1. canvas变为base64 image
  2. base64图像变为blob
  3. 使用FileSaver.js 保存
  4. blob文件

    以下是“保存”对话框出现时的样子:

    enter image description here

    这就像普通保存为(png文件)一样:

    enter image description here

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

    我该如何解决这个问题?

    非常感谢。

1 个答案:

答案 0 :(得分:1)

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

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

这是一个简单的例子

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');
}