我正在尝试对附加代码中生成的文档进行编码,但没有任何反应,不生成错误,但都没有对文件进行编码,并且ajax
request
永远不会被执行
什么是正确的方法?
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(),只需指定如下:
doc.output('datauri');
其次,base-64编码的字符串可以包含'+','/','=',它们不是URL安全字符,你需要替换它们或者你不能处理ajax。
但是,根据我自己的经验,根据文件的大小,它很容易变得很长!在达到GET方法的字符长度限制之前,编码字符串将首先崩溃您的Web开发人员工具,并且调试将很困难。
我的建议,根据你的jquery代码
processData: false,
contentType: false
发送可能是File或Blob对象的常见设置,只需查看jsPDF,就可以将数据转换为blob:
doc.output('blob');
所以完全修改你的代码:
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,你可以查看你的数据信息:
echo $_FILES['mypdf'];