h5 + plus,在真机上测试插件html2canvas + jsPDF转表单为pdf格式并导出到本地,该插件在浏览器环境可以正常导出下载,在h5+下不生效。经测试,在导出文件格式为.doc,.docx时能够创建并打开,并且能够写入内容,偏偏是.pdf格式时就会报错,真机测试是在Android机上测试的。
(以下是部分代码)
//以下代码转化表单数据为pdf
html2canvas(contentForm, {
width: scrollWidth,
height: scrollHeight,
scale: dpr * targetScale, // 总缩放比例
useCORS: true, // 允许跨域资源
logging: true, // 开启调试日志
backgroundColor: "#FFFFFF", // 避免透明背景
windowWidth: scrollWidth * targetScale, // 模拟窗口宽度
}).then(async (canvas) => {
const imgData = canvas.toDataURL("image/png");
window.jsPDF = window.jspdf.jsPDF; // add this line of code
const pdf = new jsPDF({
orientation: pdfWidth > pdfHeight ? "landscape" : "portrait",
unit: "mm",
format: [pdfWidth, pdfHeight], // 精确匹配内容尺寸
compress: true, // 压缩PDF体积
});
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(
canvas,
"JPEG",
0,
0,
pdfWidth,
pdfHeight,
undefined,
"SLOW"
);
const pdfBlob = pdf.output("blob");
const uint8Array = new Uint8Array(pdfBlob.size);
for (let i = 0; i < pdfBlob.length; i++) {
uint8Array[i] = pdfBlob.charCodeAt(i);
}
//以下代码是将pdf数据转成.pdf文件并存入本地
plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, (fs) => {
fs.root.getFile(
"example.pdf", {
create: true,
},
(fileEntry) => {
fileEntry.createWriter((writer) => {
writer.onwrite = () => {
plus.runtime.openFile(fileEntry.toLocalURL()); // 尝试打开文件
plus.nativeUI.alert("保存成功");
};
writer.onerror = (e) => {
console.error("写入失败:", e.message);
};
writer.write(uint8Array);
});
}
);
});
0 个回复