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

html to pdf

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

下载插件模块
```
cnpm install html2canvas jspdf --save
```

在项目工具方法存放文件夹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';
  });
}