Javascript 如何在base64中编码使用jspdf和html2canvas生成的文件?
我正在尝试对附加代码中生成的文档进行编码,但什么也没有发生,没有生成错误,但也没有对文件进行编码,Javascript 如何在base64中编码使用jspdf和html2canvas生成的文件?,javascript,jspdf,html2canvas,Javascript,Jspdf,Html2canvas,我正在尝试对附加代码中生成的文档进行编码,但什么也没有发生,没有生成错误,但也没有对文件进行编码,ajax请求从未执行 正确的方法是什么 html2canvas(document.getElementById("workAreaModel"), { onrendered: function(canvas) { var img = canvas.toDataURL("image/png"); var doc = new jsPDF("l",
ajax
请求
从未执行
正确的方法是什么
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
通常的设置是发送文件或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'];
此代码用于从屏幕捕获Html页面并另存为Pdf,然后作为blob发送到后端api
const filename = 'form.pdf';
const thisData = this;
this.printElement = document.getElementById('content');
html2canvas(this.printElement).then(canvas => {
this.pdfData = new jsPDF ('p', 'mm', 'a4');
this.imageHeight = canvas.height * 208 / canvas.width;
this.pdfData.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 208, this.imageHeight);
this.pdfData.save(filename);
this.uploadFile(this.pdfData.output('blob'));
});
}
uploadFile(pdfFile: Blob) {
this.uploadService.uploadFile(pdfFile)
.subscribe(
(data: any) => {
if (data.responseCode === 200 ) {
//succesfully uploaded to back end server
}},
(error) => {
//error occured
}
)
}
doc.output()
返回什么?“/model/send”
是否需要GET
请求?如果没有调试步骤和输出,这可能会被关闭为“为什么此代码不工作”问题的实例。谢谢,我需要使用doc.output('blob');卡尔,你为什么错过了url编码步骤?url是否保存?@Arendax,doc.output('datauri')
已经提供了一个二进制数据字符串,该字符串用base64编码。@Carr好的,但我需要使用doc.output('blob')代码>。毕竟我没有使用你的方式,而是使用了另一种方式,所以别介意2021年的.Update,这需要是doc.output(“datauristring”)