npm install html2canvas   

npm install jspdf

// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
  function htmlPdf(title, html) {
    html2Canvas(html, {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 1, 
      scale: 1 // 按比例增加分辨率
    }).then(canvas => {
      var pdf = new JsPDF('p', 'mm', 'a4'); // A4纸，纵向
      var ctx = canvas.getContext('2d');
      var a4w = 190; var a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
     var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
      var renderedHeight = 0;
      while (renderedHeight 

    点击按钮导出pdf
    

      
div里写需要生成的PDF内容的代码
      


日期
          
姓名
          
地址
        

{{item.date}}
          
{{item.name}}
          
{{item.address}}
        


  

import htmlPdf from '@/utils/pdf.js';
export default {
  name: 'pdfGenerate',
  data () {
    return {
      tableData: [
        {date: '2016-05-02',name: '王大虎',address: '上海市普陀区金沙江路 111 弄'},
        {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 112 锤'}, 
        {date: '2016-05-01',name: '王三虎',address: '上海市普陀区金沙江路 113 子'},
        {date: '2016-05-03',name: '王四虎',address: '上海市普陀区金沙江路 114 呢'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 弄'}
      ]
    }
  },
  methods: {
    generate () {
      var TypeName = '生成的PDF';
      // 注意这一句
      htmlPdf(TypeName, document.querySelector('#pdf-details'));
    }
  }
}

    点击按钮导出pdf
    

      
div里写需要生成的PDF内容的代码
      
占位
      


日期
姓名
地址
        

{{item.date}}
{{item.name}}
{{item.address}}
 
        


  

//引用生成pdf方法
import htmlPdf from '@/utils/pdf.js';
export default {
  name: 'pdfGenerate',
  data () {
    return {
      tableData: [
        {date: '2016-05-02',name: '王大虎',address: '上海市普陀区金沙江路 111 弄'},
        {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 112 锤'}, 
        {date: '2016-05-01',name: '王三虎',address: '上海市普陀区金沙江路 113 子'},
        {date: '2016-05-03',name: '王四虎',address: '上海市普陀区金沙江路 114 呢'},
        {date: '2016-05-03',name: '测试超长隔断',address: '这是汉字但生成时有隔断，我现在要处理他;这是汉字但生成时有隔断，我现在要处理他;'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 弄'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 啊'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 测'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 试'}
      ]
    }
  },
  methods: {
    generate () {
      var TypeName = '生成的PDF';
      const lableList = document.getElementsByClassName('pdf-details');   // 注意这一句
      htmlPdf(TypeName, document.querySelector('#pdf-details'), lableList);
    }
  }
}

td{
  padding: 20px;
}

// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
var noTableHeight = 0; //table外的元素高度
function htmlPdf(title, html, lableList, type) {// type传有效值pdf则为横版
  if (lableList) {
    const pageHeight = Math.floor(277 * html.scrollWidth / 190) +20; //计算pdf高度
    for (let i = 0; i  {
    var pdf = new JsPDF('p', 'mm', 'a4'); // A4纸，纵向
    var ctx = canvas.getContext('2d');
    var a4w = type ? 277 : 190; var a4h = type ? 190 : 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
    var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
    var renderedHeight = 0;
    while (renderedHeight  pageHeight;
  } else {
    return nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight  pageHeight;
  }
}
export default htmlPdf;