web前端pdf导出功能

1.运行环境

1）js可以运行的环境就可以。

2.所需插件（js包）

1）jspdf.debug.js

2）html2canvas.js

说明：如果是vue.js的环境，可以用import来引入这两个组件。我的是html页面，就直接引入了js。代码如下：

<script src="../../../jsLib/pdf/jspdf.debug.js"></script>
<script src="../../../jsLib/pdf/html2canvas.js"></script>
路径根据自己的项目而定。

3.一言不合，上代码

1）按钮

<el-button type="button" @click="exportPdf">导出</el-button>任何位置都可以，只要能触发导出方法接口。

2）内容

<div id="vueBlock">

这里面是要导出的内容，可以是图表，可以是表格，可以是图片等等。

</div>

3）导出pdf方法

代码往往是越简单越好。

exportPdf:function(){
    //获取要导出的元素
    var target = document.getElementById("vueBlock");
    //背景色
    target.style.background = "#FFFFFF";
    //html2canvas引入后的核心方法，把html转换成pdf
    html2canvas(target).then((canvas) => {
        //原始的canvas的宽度
        var contentWidth = canvas.width;
        //原始的canvas的高度
        var contentHeight = canvas.height;
        //初始化一个jsPDF对象
        //参数说明见附1
        //这里啰嗦几句。[contentWidth, contentHeight]这样的写法是为了避免用指定的格式（如A4）分页时把内容截断。
        let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight]);
        //参数说明见附2
        //这里啰嗦几句。3,4,5,6这几个参数可以用来截断一些不想要的内容。比如页面的搜索栏，底部的logo等等。说白了，就是控制开始，结束的坐标。把不需要的内容控制在坐标矩形之外就可以了。
        pdf.addImage(pageData, 'JPEG', 0, -80, contentWidth - 20, contentHeight + 80 );
        pdf.save("test".pdf");
    });
},

4.附属说明

1）附1

第一个参数： l：横向  p：纵向

第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）

第三个参数：可以是下面格式，默认为“a4”

a0 - a10
b0 - b10
c0 - c10
dl
letter
government-letter
legal
junior-legal
ledger
tabloid
credit-card
默认为“a4”。如果您想使用自己的格式，只需将大小作为数字数组传递，例如[595.28, 841.89];
原文链接：https://blog.csdn.net/weixin_42333548/article/details/107630706

2）附2

第一个参数：导出内容

第二个参数：图片格式

第三个参数：开始点的x坐标

第四个参数：开始点的y坐标

第五个参数：结束点的x坐标

第六个参数：结束点的y坐标

3）附3

说明：程序的实图不能提供，这个关系到公司的隐私。有说的不对的地方，请指教，有看不懂的地方，欢迎私我。