jsPDF 与 html2canvas 产生模糊的 pdf？

Question

我目前正在通过 html2canvas 将 div 的内容转换为 png，但是使用 scale: 5 或 dpi: 等对随后的图像质量没有任何影响。这是 html2canvas 的结果，因为我在 pdfcon() 函数期间附加了画布，并且非常模糊:)。我已经在互联网上搜索了无济于事的答案，任何帮助将不胜感激:)。（我也在使用 Quill 编辑器）

HTML：

    <div id="editorOne" class="pdf-convert ql-container ql-snow">
        <div id="specialEdit" class="ql-editor" data-gramm="false" contenteditable="false">
            <?php echo stripslashes($newClean); ?>
        </div>
    </div>
    <button onclick="pdfcon()">Save Pdf</button>

JS：

function pdfcon() {
                html2canvas($("#editorOne"), {
                    scale: 5,
                    onrendered: function (canvas) {
                        document.body.appendChild(canvas);
                        var img = canvas.toDataURL("png");

                        var doc = new jsPDF("p", "mm", "a4");

                        var width = doc.internal.pageSize.getWidth();
                        var height = doc.internal.pageSize.getHeight();

                        doc.addImage(img, 'PNG', 0, 0, width, height);
                        doc.save('testing.pdf');
                    }
                })
            };

Answer 1

你可以给它更好的质量。在 html2canvas 中，您的质量级别为 0-4。

您必须将其作为参数添加到对象中。

html2canvas($("#editorOne"), {
                quality: 4,
                scale: 5,

但请注意，质量级别 4 生成的 pdf 文件大小约为 60mb。最好的选择是使用质量级别 1 或 2。