Question

我正在使用jspdf通过以下代码将html转换为pdf。

html2canvas(document.getElementById("page4")).then(
                            function(canvas) {
                                document.body.appendChild(canvas);
                                var context = canvas.getContext("2d");
                                var imgData4 = canvas.toDataURL("image/jpeg");
                                var doc = new jsPDF(options, "", "", "");
                                doc.addPage();
                                doc.addImage(imgData4, 'jpeg', 0, 0);
                                doc.save(enrId + ".pdf");
                            });

首先我将html转换为jpeg。我有4页，所以每页都是单独的jpeg

然后我将每个页面分配到pdf页面像那样，我将html转换为pdf。

我这里没有遇到任何问题，但内存是一个问题

我的问题是，

pdf大小约为1.5MB到2MB。如何减少pdf大小？

如果不可能，建议将其他插件转换为HTML格式为pdf

Answer 1

使用PNG时遇到了同样的问题，现在使用的是JPEG格式，文件大小从6000 ko增加到300 ko。

尝试此代码：

canvas.toDataURL( 'image/jpeg', 1.0 );

改变质量：

var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);

此页面中的更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Answer 2

我知道这是一个老问题，但我只是讨厌看到未回答的问题。所以我们开始。您使用大文件的pdf的部分原因是因为html页面首先转换为图像。要减小文件大小，请改用支持向量的API。只需使用jsPDF html PlugIn，replacement of addHtml()。

我找不到html2canvas 1.0.0-alpha.11的CDN，因此无法在此处创建代码段。以下代码对我有用。 pdf内容可搜索且清晰。您需要相应地调整页面的大小。

<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>
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a3');
        pdf.html(document.getElementById('idName'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>

如何在jspdf文件中减小pdf的大小

2 个答案: