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

最新推荐文章于 2024-08-08 07:59:25 发布

qin·zengfu

最新推荐文章于 2024-08-08 07:59:25 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/zengfu123/article/details/118354684

版权

本文介绍如何在Vue项目中利用jspdf和html2canvas库将HTML内容转化为PDF并保存到本地。首先安装这两个依赖，然后在main.js中定义方法，通过className获取特定内容生成PDF。调用方式如this.getPdf('文件名', 'className')，例如要生成'生成pdf.pdf'，则调用this.getPdf('生成pdf', '.test')。对于多标签的class，可以实现PDF拼接，并提供页面适配方案，参考链接：https://www.cnblogs.com/linxing/p/13864117.html。" 84775748,8109504,Java连接SAP：JCO 3.0技术实战解析,"['SAP开发', 'Java开发', 'JCO接口', 'Web服务器集成', 'SAP Netweaver']

摘要由CSDN通过智能技术生成

安装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页