vue生成pdf文件

在网上找的资源，第一次做这样的功能，记录一下学习。

大概思路就是将html转换成canvas，获取canvas的宽高，将canvas转换成图片。最后将图片转换成pdf。

在网上找过很多资源，帮助自己解决了很多问题，想着也回报一下。这功能自己亲测可用的。

一、第一部引入依赖

npm install html2canvas

npm install jspdf

二、代码部分

js代码

//随便新建个js文件。自己能找到就行，配置js代码
import html2canvas from "html2canvas";
import jsPDF from "jspdf";export const downloadPDF = page => {html2canvas(page).then(function(canvas) {canvas2PDF(canvas);});
};const canvas2PDF = canvas => {let contentWidth = canvas.width;let contentHeight = canvas.height;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28;let imgHeight = 592.28/contentWidth * contentHeight;// 第一个参数： l：横向  p：纵向// 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）let pdf = new jsPDF("p", "pt");pdf.addImage(canvas.toDataURL("image/jpeg", 1.0),"JPEG",0,0,imgWidth,imgHeight);pdf.save("SM功能目标确认概率指标评估报告.pdf");
};

html代码：

<div ref='pdf'>这里是要输出的PDF块
</div>
<button @click='exportPdf'>导出pdf</button>

vue页面里的js代码，调用一下方法就可以了

 import {downloadPDF} from '../config/htmlToPdf.js' //我是菜鸟，因为没括花括号报了半天错我当时还没注意到。浪费了好久时间handleExport() {downloadPDF(this.$refs.pdf)}

结语：功能自己找了半天亲测可用的，调用那里不用ref改成id调用（documentgetElementById('pdf')）也是可以的

vue生成pdf文件相关推荐

SpringBoot+Vue+mybatis生成pdf文件（表头跟页码，适应上传linux服务器后的操作）
SpringBoot+Vue+mybatis生成pdf文件(表头跟页码,适应上传linux服务器后的操作) 为什么使用后端去生成说明依赖后端目录控制器代码模板代码前端代碼最終效果为什么 ...
iText5实现Java生成PDF文件完整版,二维码
iText5实现Java生成PDF文件完整版 vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览,缩放,旋转,下载,保存等功能 ? Vue打印文件(v-print ...
python使用fpdf生成pdf文件章节（chapter），包含：页眉、页脚、章节主题、数据排版等；
python使用fpdf生成pdf文件章节(chapter),包含:页眉.页脚.章节主题.数据排版等: #仿真数据 The year 1866 was marked by a bizarre deve ...
python使用fpdf生成pdf文件：配置多种语言字体写入多种文字
python使用fpdf生成pdf文件:配置多种语言字体写入多种文字目录
一步快速将Smartform output转成生成PDF文件
世间竟有如此盖世神功!最简单的smart form output转化成 PDF文件的方式. Form打印预览界面在事务栏输入T-code:PDF!,注意!为半角英文状态下的感叹号. 输入T-cod ...
安装texlive并用latex编写一段中文，最后生成pdf文件
安装texlive并用latex编写一段中文,最后生成pdf文件 **#一.下载安装(**链接https://tug.org/texlive/) ##1.第一步 ##2.第二步 ##3.第三步 ##4 ...
小容量单片机生成pdf文件
工作上要求使用小容量单片机生成直接生成pdf文件. 经过一段时间的摸索,其中参考了libharu,库太大,不适合在单片机上使用页参考了与非网上一位前辈的库,占用的RAM太大,不适合小容量单片机, 主 ...
php输出PDF的文件流_怎么用PHP在HTML中生成PDF文件
译文:使用PHP在html中生成PDF 译者:dwqs 利用PHP编码生成PDF文件是一个非常耗时的工作.在早期,开发者使用PHP并借助FPDF来生成PDF文件.但是如今,已经有很多函数库可以使用了, ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

vue生成pdf文件

vue生成pdf文件相关推荐

最新文章

热门文章