我使用PDFJs使用fabric js批注的PDF和使用JsPDF的结果画布图像保存为PDF。
这就是我如何保存它:
canvas.height = viewport.height;
canvas.width = viewport.width;
var width = canvas.width;
var height = canvas.height;
var pdf = new jsPDF('p', 'pt', [width, height]);
$.each(inst.fabricObjects, function (index, fabricObj) {
if (index != 0) {
pdf.addPage();
pdf.setPage(index + 1);
}
var imgData = fabricObj.toDataURL({
format: 'jpg',
quality: 0.9
});
pdf.addImage(imgData, 'jpg', 0, 0, width, height, null, 'FAST');
//pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
});
pdf.save("sample.pdf");
这导致从3.12MB到11.2MB PDF尺寸的增加,它看起来模糊不清。
这段代码我使用早些时候节省巨大的大小PDF哪些
var pdf = new jsPDF();
$.each(inst.fabricObjects, function (index, fabricObj) {
if (index != 0) {
pdf.addPage();
pdf.setPage(index + 1);
}
pdf.addImage(fabricObj.toDataURL(), 'JPG', 0, 0, canvas.width, canvas.height);
});
原文件大小:3.12MB
保存的PDF文件大小:213MB
你应该尝试新的矢量支持API,pdf.html()
,从jsPDF。看到自己sample自己。我用html2canvas.1.0.0-alpha.12.js
和jspdf.debug.js
。这里是工作的代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
function download() {
let pdf = new jsPDF('l', 'pt', [1920, 640]);
pdf.html(document.getElementById('id'), {
callback: function (pdf) {
pdf.save('test.pdf');
}
});
}
</script>