JS导出HTML至PDF文件

码农罢了

已于 2023-01-16 11:36:09 修改

阅读量868

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-07-12 14:30:53 首次发布

本文链接：https://blog.csdn.net/canxiaoL/article/details/125742394

版权

这篇博客介绍了如何利用jsPDF库将HTML内容转换为PDF文件。作者提到直接通过链接引入jsPDF可能无效，但可以通过复制其内容到本地进行引用。在转换过程中，需要注意移除滚动条以避免PDF中出现黑色区域，同时为防止页面变形，可以设置目标元素父级的opacity为0，而不是使用display: none，因为后者会导致PDF导出全黑。更多详细设置可以参考jsPDF的官方网站。

摘要由CSDN通过智能技术生成

github地址：https://github.com/parallax/jsPDF

直接引入到script似乎行不通

但是把这个链接直接打开却可以看到内容，然后把js内容复制到本地再引入。

有滚动条要先去掉，否则pdf中会显示一片黑色，但是呢去掉滚动条原本页面会变形，这时候给目标元素的父级一个opacity=0。不能display: none;不然导出的pdf会全黑

function exportHtml() {
    var pdf =new jsPDF();
    var name = 'name';
    var target = document.getElementById('pdf');
    
    html2canvas(document.querySelector('#pdf'), {
        allowTaint: true,
    }).then(function (canvas) {
        var canvaWidth = canvas.width;
        var canvaHeight = canvas.height;
        var pageHeight = canvaWidth / 592.28 * 841.89;
        var leftHeight = canvaHeight;
        var position = 0;
        var imgwidth = 595.28;
        var imgheight = imgwidth / canvaWidth * canvaHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4'