前端html页面转成pdf格式并下载

html to pdf

目的：前端将页面导出为pdf格式，主要用到html2canvas 、 jspdf两个插件，其实html2canvas 这个插件就相当于将屏幕‘截’了一张图，当然也并不是真正的截图，通过遍历dom生成，所以其实就是张图片，虽然方法好用方便，但是也有一定的缺陷，那就是导出的pdf无法复制里面的内容。

1. 下载插件模块

   cnpm install html2canvas jspdf --save
   

2. 在项目工具方法存放文件夹utils中创建htmlToPdf.js文件

   第一种，导出比较基本，直接将整个页面导出。

   // 导出页面为PDF格式
   import html2Canvas from 'html2canvas';
   import JsPDF from 'jspdf';
   
   export function htmlToPdf(title=new Date().getTime()) {
     return html2Canvas(document.body, {
          // useCORS:true, //保证跨域图片的显示
         // width:window.screen.availWidth, //显示canvas窗口的宽度 
         // height:window.screen.availHeight, //显示canvas窗口的高度
         // windowHeight: document.body.scrollHeight, //获取y方向滚动条中的内容
         // windowWidth: document.body.scrollWidth,//获取x方向滚动条中的内容
         // x:0, //页面在水平方向上没有滚动，故设置为0
         // y: window.pageXOffset  //页面在垂直方向的滚动距离
     }).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;
         
         // 将图片转化为dataUrl
       let pageData = canvas.toDataURL('image/jpeg', 1.0);
         
       // 三个参数，第一个方向（landscape横向？），第二个尺寸，第三个尺寸格式
       let PDF = new JsPDF('', 'pt', 'a4');
         
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度      (841.89)
        //当内容未超过pdf一页显示的范围，无需分页
       if (leftHeight < pageHeight) {
          // 0, 0, 控制文字距离左边，与上边的距离，后两个参数控制添加图片的尺寸，此处将页面高度按照     a4纸宽高比列进行压缩
         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');
     });
   
   }
   

   第二种，在第一种基础上改进了一些，可以实现导出一个有滚动条的表格。

   import html2Canvas from 'html2canvas';
   import JsPDF from 'jspdf';
   
   /**
    * @param table    必填  要导出的table  通过级联选择器选择的元素
    * @param thead    可选
    * @param tbody    可选
    * @param setTable  可选  主要控制导出table的高度
    */
   
   export function htmlToPdf(table, thead, tbody, setTable) {
     let theader = thead || '';
     let tbodyer = tbody || '';
     let setTabler = setTable || '';
     let originHeight = setTabler.offsetHeight || table.offsetHeight;
     if (theader && tbodyer && setTabler) {
       setTabler.style.height = (tbodyer.offsetHeight + theader.offsetHeight) + 'px';
     }
     return html2Canvas(table, {
       // 保证跨域图片的显示
       useCORS: true
     }).then(function (canvas) {
       let contentWidth = canvas.width;
       let contentHeight = canvas.height;
       let pageHeight = contentWidth / 592.28 * 841.89;
       let leftHeight = contentHeight;
       let position = 15;
       let imgWidth = 595.28;
       let imgHeight = 592.28 / contentWidth * contentHeight;
       // 将图片转化为dataUrl
       let pageData = canvas.toDataURL('image/jpeg', 1.0);
       // 三个参数，第一个方向（landscape横向？），第二个尺寸，第三个尺寸格式
       let PDF = new JsPDF('', 'pt', 'a4');
       // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
       // 当内容未超过pdf一页显示的范围，无需分页
       if (leftHeight < pageHeight) {
         //  0, 0, 控制文字距离左边，与上边的距离，后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
         PDF.addImage(pageData, 'JPEG', 20, position, imgWidth - 40, imgHeight);
       } else {
         while (leftHeight > 0) {
           PDF.addImage(pageData, 'JPEG', 20, position, imgWidth - 40, imgHeight);
           leftHeight -= pageHeight;
           position -= 841.89;
           // 避免添加空白页
           if (leftHeight > 0) {
             PDF.addPage();
           }
         }
       }
       let title = new Date().getTime();
       PDF.save(title + '.pdf');
       setTabler.style.height = originHeight + 'px';
     });
   }
   

3. 相关页面

   vue

   // html
    <el-button type="primary" @click="getPdf()">下载PDF</el-button>
   
   // js
   import htmlToPdf from '@/utils/htmlToPdf';
   methods: {
        getPdf() {
         // let title = '现金宝';
         // htmlToPdf(title);
         htmlToPdf();
       }
   }
   

​ react

// 引入
import {htmlToPdf} from '../../utils/htmlToPdf'

class xxx {
    
     DownloadPdf = () => {
        let title = 'sysmain';
        htmlToPdf(title)
      };

    //
    render() {
        const gridButtons = [{
          text: '下载PDF',
          onClick: () => this.DownloadPdf(),
        }]
    }
}