html前端使用js生成pdf文件并保存到本地

安装jspdf和html2canvas依赖，其中jspdf是文件保存操作，html2canvas是为了将内容转换为canvas图片

npm install jspdf  html2canvas --save

vue的首个class内容的pdf生成，这个主要写在main里面定义，这样在页面上就可以使用this.getPdf(文件名,"className")进行调用；文件名为不带   .pdf 的字符串，className为带标识的className，如 

；要生成的pdf文件名为：生成pdf.pdf,则调用为this.getPdf("生成pdf",".test")

import Vue from "vue";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
Vue.prototype.getPdf = function(title, domClass) {  
  let element = document.querySelector(domClass); // 这个dom元素是要导出pdf的div容器  
  html2Canvas(element).then(function(canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let per = (contentWidth / 573.28)*0.75;//这个主要是为了防止宽度不够的
    //一页pdf显示html页面生成的canvas高度;
    let pageHeight = (contentWidth / 573.28) * 841.89;
    //未生成pdf的html页面高度
    let leftHeight = contentHeight;
    //页面偏移
    let position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 573.28;
    let imgHeight = (573.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    // console.log(pageData,"pageData");
    //        let pdf = new JsPDF('', 'pt', 'a4');
    let pdf = new JsPDF("", "pt", [595.28,841.89]); //不分页    // pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 11, 70, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // console.log(pdf,"pdf",title);
    pdf.save(title + ".pdf");
  });
};

在js项目中调用

import Vue from "vue";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
function getPdf (title, domClass) {  let element = document.querySelector(domClass); // 这个dom元素是要导出pdf的div容器  
html2Canvas(element).then(function(canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    //一页pdf显示html页面生成的canvas高度;
    let pageHeight = (contentWidth / 573.28) * 841.89;
    //未生成pdf的html页面高度
    let leftHeight = contentHeight;
    //页面偏移
    let position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 555.28;
    let imgHeight = (592.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    // console.log(pageData,"pageData");
    //        let pdf = new JsPDF('', 'pt', 'a4');
    let pdf = new JsPDF("", "pt", [contentWidth, contentHeight]); //不分页
    // pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 11, 70, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // console.log(pdf,"pdf",title);
    pdf.save(title + ".pdf");
  });
};

一个class有多个标签的情况，最后实现拼接pdf,对于页面适配参考上面的，

import Vue from "vue";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
Vue.prototype.getPdf = function(title, domClass) {
  // let contantHeight,contantWidth;
  // let contantWidth = 0
  let posLeft = 11,posTop = 20;
  let pdf = new JsPDF("", "pt", [595.28, 841.89]);
  // console.log(posLeft,posTop,imageData);
  let element = document.querySelectorAll(domClass);
 // 这个dom元素是要导出pdf的div容器  for (let item of element){
    console.log(item.offsetHeight)
    html2Canvas(item).then(function(canvas) {
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      // let pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      // let leftHeight = contentHeight;
      //页面偏移
      // let position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = 573.28;
      let imgHeight = (573.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
      // console.log(imageData,"imageData");
      //        let pdf = new JsPDF('', 'pt', 'a4');
      // let pdf = new JsPDF("", "pt", [contentWidth, contentHeight]); //不分页
      pdf.addImage(pageData, "JPEG", posLeft, posTop, imgWidth, imgHeight);
      posTop = posTop + imgHeight + 10;
        // // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // // 当内容未超过pdf一页显示的范围，无需分页
      // if (leftHeight < pageHeight) {
      //   pdf.addImage(pageData, 'JPEG', 11, 0, imgWidth*per, imgHeight*per);
      // } else {
      //   while (leftHeight > 0) { 
     //     pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
      //     leftHeight -= pageHeight;
      //     position -= 841.89;
      //     //避免添加空白页
      //     if (leftHeight > 0) {
      //       pdf.addPage();
      //     }
      //   }
      // }
      // console.log(pdf,"pdf",title);
      // pdf.save(title + ".pdf");
    });
  }
  // let pdf = new JsPDF('', 'pt', 'a4');
  setTimeout(()=>{
    console.log(pdf)
    pdf.save(title + ".pdf");
  },1000)
};

本文CSDN地址：blog.csdn.net/zengfu123/a…

参考文档：www.cnblogs.com/linxing/p/1…