Question

我想从HTML（我们在屏幕上看到的内容）中创建PDF，而不是图像。图像可以正常工作，但是对于HTML可以做到这一点，但它并不能像UI中那样捕获，而是有所不同。

我正在使用jsPdf，html2canvas和Angular 5

请让我知道如何将HTML（在UI中看到）捕获为PDF（而不是图像）。

谢谢提要。

Answer 1

我将本机浏览器print功能与打印样式表结合使用，例如引导程序提供的样式表，或者您可以编写自己的样式表。

只需在您的方法内部调用

print()

“打印”对话框将打开，您可以选择“目标” 另存为PDF ，而不用选择打印机。

还要确保在更多设置部分中也启用了背景图形。

Answer 2

您可以使用vector-supporting API中的jsPDF。从link那里检查他们的示例代码。我使用了html2canvas 1.0.0-alpha.12。旧版本可能无法正常工作。这样的事情应该做。

<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', 'a4');
        pdf.html(document.getElementById('idName'), {
            callback: function () {
                pdf.save('test.pdf');
                // window.open(pdf.output('bloburl')); // to debug
            }
        });
    }
</script>

从HTML UI创建PDF而不作为图像

2 个答案: