对于大量的 PDF 生成问题,我们深表歉意。我一直在研究一个使用分页符将页面转换为多页pdf(使用jsPDF)的项目。我(终于!)让该项目在谷歌浏览器中运行,但在 Firefox 中测试它时,我能够生成第一页,但后两个页面显示为全黑。这是代码:
$(document).ready(function()
{
$("#runpdf").click(function(event)
{
var partsec = $("main_body page1");
html2canvas(document.body,
{
logging: true,
profile: true,
allowTaint: true,
letterRendering: true,
onrendered: function(canvas)
{
var sectionHeight = $("section").height();
var sectionWidth = $("#width").width();
var doc = new jsPDF();
var image = new Image();
var imageData = canvas.toDataURL("image/jpeg");
image = Canvas2Image.convertToJPEG(canvas);
doc.addImage(imageData,'JPEG', -115, 5, 440, 875);
doc.addPage();
var canvas1 = document.createElement('canvas');
canvas1.setAttribute('height', sectionHeight);
canvas1.setAttribute('width', sectionWidth);
var ctx = canvas1.getContext("2d");
ctx.drawImage(image, 0, 1025, sectionWidth, 1250, 0, 0, 1800, 950);
var image2 = new Image();
image2 = Canvas2Image.convertToJPEG(canvas1);
image2Data = image2.src;
doc.addImage(image2Data, 'JPEG', -105, 5, 440, 325);
doc.addPage();
var canvas2 = document.createElement('canvas');
canvas2.setAttribute('height', sectionHeight);
canvas2.setAttribute('width', sectionWidth);
var ctx1 = canvas2.getContext("2d");
ctx1.drawImage(image, 0, 2050, sectionWidth, 1250, 0, 0, 1800, 1000);
var image3 = new Image();
image3 = Canvas2Image.convertToJPEG(canvas2);
image2Data = image3.src;
doc.addImage(image2Data, 'JPEG', -105, 5, 440, 325);
doc.save('test.pdf');
}
});
});
});
正如您所看到的,每个页面都是单独生成的,并且由于第一个页面正在运行,但后两个页面没有,我假设问题出在 getContext 或 drawImage 函数上。我如何更改此设置或添加一些内容以使其能够在 Firefox 中正常工作。 再次感谢。
最佳答案
您可以尝试将blob保存到pdf中,而不是直接使用doc.save,这是修改后的代码
$(document).ready(function()
{
$("#runpdf").click(function(event)
{
var partsec = $("main_body page1");
html2canvas(document.body,
{
logging: true,
profile: true,
allowTaint: true,
letterRendering: true,
onrendered: function(canvas)
{
var sectionHeight = $("section").height();
var sectionWidth = $("#width").width();
var doc = new jsPDF();
var image = new Image();
var imageData = canvas.toDataURL("image/jpeg");
image = Canvas2Image.convertToJPEG(canvas);
doc.addImage(imageData,'JPEG', -115, 5, 440, 875);
doc.addPage();
var canvas1 = document.createElement('canvas');
canvas1.setAttribute('height', sectionHeight);
canvas1.setAttribute('width', sectionWidth);
var ctx = canvas1.getContext("2d");
ctx.drawImage(image, 0, 1025, sectionWidth, 1250, 0, 0, 1800, 950);
var image2 = new Image();
image2 = Canvas2Image.convertToJPEG(canvas1);
image2Data = image2.src;
doc.addImage(image2Data, 'JPEG', -105, 5, 440, 325);
doc.addPage();
var canvas2 = document.createElement('canvas');
canvas2.setAttribute('height', sectionHeight);
canvas2.setAttribute('width', sectionWidth);
var ctx1 = canvas2.getContext("2d");
ctx1.drawImage(image, 0, 2050, sectionWidth, 1250, 0, 0, 1800, 1000);
var image3 = new Image();
image3 = Canvas2Image.convertToJPEG(canvas2);
image2Data = image3.src;
doc.addImage(image2Data, 'JPEG', -105, 5, 440, 325);
var data = doc.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
array[i] = data.charCodeAt(i);
}
var blob = new Blob(
[array],
{type: 'application/pdf', encoding: 'raw'}
);
saveAs(blob, "test.pdf");
});
});
});
除了 jspdf 之外,这里使用的 JavaScript 是 canvas-toBlob.js 和 FileSaver.js
关于javascript - 在 Firefox 中生成 jsPDF 时存在兼容性问题的 pdf 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24330820/