如何在base64中对使用jspdf和html2canvas生成的文件进行编码? [英] How encode in base64 a file generated with jspdf and html2canvas?

问题描述

我正在尝试对在所附代码中生成的文档进行编码，但是什么也没有发生，没有生成错误，但是也没有对文件进行编码，并且ajax request从未执行

i'm trying encode the document generated in the attached code, but nothing happens, not generate error but neither encodes the file, and the ajax request is never executed

正确的方法是什么?

    html2canvas(document.getElementById("workAreaModel"), {
    onrendered: function(canvas)
    {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF("l", "pt", "letter");
        doc.addImage(img, 'JPEG',20,20);
        var fileEncode = btoa(doc.output());
         $.ajax({
              url: '/model/send',
              data: fileEncode,
              dataType: 'text',
              processData: false,
              contentType: false,
              type: 'GET',
              success: function (response) {
                   alter('Exit to send request');
              },
              error: function (jqXHR) {
                  alter('Failure to send request');
              }
             });
    }
});

推荐答案

首先，jsPDF不是javascript原生的，请确保您已包括正确的源代码，并且在窥视了其他引用之后，我认为您不需要btoa()函数可以转换doc.output()，只需像这样指定:

First, jsPDF is not native in javascript, make sure you have included proper source, and after having a peek on other references, I think you don't need btoa() function to convert doc.output(), just specify like this :

 doc.output('datauri');

第二个base-64编码的字符串可能包含'+'，'/'，'='，但不能 URL安全字符，您需要替换它们，否则就无法处理ajax.

Second, base-64 encoded string is possible to contain ' + ' , ' / ' , ' = ', they are not URL safe characters , you need to replace them or you cannot deal with ajax .

但是，根据我自己的经验，根据文件的大小，很容易长见鬼！在达到字符的GET方法的长度限制之前，编码的字符串将首先使您的Web开发人员工具崩溃，并且调试将很困难.

However, in my own experience, depending on file's size, it's easy to be hell long ! before reaching the characters' length limit of GET method, encoded string will crash your web developer tool first, and debugging would be difficult.

根据您的jquery代码，我的建议

My suggestion, according to your jquery code

processData: false,
contentType: false

通常的设置是发送 File 或 Blob 对象， 只需看一下jsPDF，就可以将您的数据转换为blob了:

It is common setting to send maybe File or Blob object, just have a look on jsPDF, it is availible to convert your data to blob :

doc.output('blob');

因此，请完全修改您的代码:

so revise your code completely :

var img = canvas.toDataURL("image/png");
var doc = new jsPDF("l", "pt", "letter");
doc.addImage(img, 'JPEG',20,20);
var file = doc.output('blob');
var fd = new FormData();     // To carry on your data  
fd.append('mypdf',file);

$.ajax({
   url: '/model/send',   //here is also a problem, depends on your 
   data: fd,           //backend language, it may looks like '/model/send.php'
   dataType: 'text',
   processData: false,
   contentType: false,
   type: 'POST',
   success: function (response) {
     alter('Exit to send request');
   },
   error: function (jqXHR) {
     alter('Failure to send request');
   }
});

如果您在后端使用php，则可以查看一下数据信息:

and if you are using php on your backend , you could have a look on your data information:

echo $_FILES['mypdf'];

这篇关于如何在base64中对使用jspdf和html2canvas生成的文件进行编码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！