一、首先一个简单的方案，

直接把网页转成图片，然后再转成pdf，此方法较为简单！

1、下载组件，然后直接复制下面方法保存成 exportPdf.js 文件

npm install --save html2canvas //html页面转换成图片
npm install jspdf --save //把base64转换为PDF

import html2Canvas from 'html2canvas'
import { jsPDF } from "jspdf"

export default function getPdfExport(id, title = 'pdf') {
    return new Promise((resolve, reject) => {
        html2Canvas(document.querySelector(`#${id}`), {
            allowTaint: true
        }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)

            // 转成pdf 
            let PDF = new jsPDF('', 'pt', 'a4')
            if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
                while (leftHeight > 0) {
                    PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight
                    position -= 841.89
                    if (leftHeight > 0) {
                        PDF.addPage()
                    }
                }
            }
            PDF.save(title + '.pdf')
            // 转成图片
            let aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = pageData;
            aLink.download = title + ".jpg";
            // 触发点击-然后移除
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink);
            // 返回
            resolve('success')
        }
        )
    })
}

2、页面内使用

 <div id="pdfHtml" @click="handlePdf">...</div>
 
 import getPdfExport from '@/utils/exportPdf'
    handlePdf() {
            this.pdfLoading = true
            getPdfExport('pdfHtml', '标题').then(res => {
                setTimeout(() => {
                    this.pdfLoading = false
                    this.$message.success('pdf 保存成功')
                }, 1000)

            }).catch(err => {
                this.pdfLoading = false
                this.$message.error('pdf 保存失败')
            })
        }

二、自定义写入

上面方法比较是图片导入的，而且设计到长图会导致截断问题，所以我们还可以自定义内容！

1、中文问题解决

自己写当然最蛋疼的是中文了，因为插件内置只有英文

2.1.1、下载

https://github.com/parallax/jsPDF

2.1.2、打开页面，拿本地字体生成js文件

打开fontconverter/fontconverter.html，把你本地字体上传 

在C:\Windows\Fonts 里面有很多中文字体，复制一个出来！

上传就会得到一个js文件！复制放到项目里面

2.1.3、引入字体文件

import '../../static/js/simhei-normal.js' // 引入刚得到的js文件
export function setJsPDF(id) {
    const pdf = new jsPDF(
        {
            orientation: "P",//l 横向 p 纵向 
            unit: "px",//单位设置
            hotfixes: [20],
            format: 'a4',// 纸张大小 默认a4. 可选a0-a10 或者数组[宽,高][925.44, 357.5] 单位是px
            putOnlyUsedFonts: true
        }
    );
     pdf.setFont('simhei', 0); // 设置字体为你引入的字体
     console.log(pdf.getFontList()) // 字体列表
    pdf.text('哈哈哈134', 55, 180);
    pdf.save('报表.pdf')
     }

然后就可以了！

2、常见的一些操作

    var doc = new jsPDF();
    // 打印所有可用的字体
    console.log(doc.getFontList());
    // 设置字体（内置的几种字体都是不支持中文，中文字体需要自己添加）
    doc.setFont("simhei");
    // 设置字体大小
    doc.setFontSize(20);
    // 添加文字内容，左边距离和上边距离
    doc.text('哈哈哈134', 55, 180);
    // 添加图片（图片转成DataURL形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQA...）
    //左上距离，图片长宽
   doc.addImage(images, 'PNG', 55, 55, 100, 100);
    // 保存pdf
    doc.save('报表.pdf')

3、表格问题

下载插件

 cnpm install  --save jspdf-autotable

  doc.autoTable({
      styles: {
                font: 'simhei',
            },
        head: [['Name', 'Email', 'Country']],
        body: [
            ['David', 'david@example.com', 'Sweden'],
            ['Castille', 'castille@example.com', 'Spain'],
        ],
    })