生成证书模板---vue实现HTML转PDF

文章目录

1、下载插件模块
2、定义功能实现方法
3、全局引入实现方法
4、在相关要导出的页面中，点击时调用绑定在vue原型上的getPDF方法

自动生成证书并且导出PDF格式

1、下载插件模块

npm install html2canvas jspdf --save

2、定义功能实现方法

在项目工具方法存放文件utils中创建htmlToPdf.js文件，代码如下：

这里包含了图片下载。

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function () {var title = this.htmlTitle // 导出名称var type = this.downType // 导出类型 true ->图片 false-> pdfvar htmlID = document.getElementById('pdfDom')// window.pageYoffset = 0; // 如果有滚动条影响，会导致导出的内容不全，可以直接设置导出前置顶// document.documentElement.scrollTop = 0;// document.body.scrollTop = 0;html2Canvas(htmlID, {allowTaint: true,// scrollY: 50, // 偏移量吧，如果有滚动条影响，但是不想设置滚动条置顶， 可以设置这个，但是要计算滚动了多少// scrollX:0,// x:0, // 距离左边距离// y:10,// width: 1000,// height: 800// 下面两个用来提高清晰度dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍scale:4, //按比例增加分辨率useCORS: true // 【重要】开启跨域配置}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.height//一页pdf显示html页面生成的canvas高度let pageHeight = contentWidth / 592.28 * 841.89//未生成pdf的html页面高度let leftHeight = contentHeight//页面偏移let position = 0let imgWidth = 592.28//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高// let imgHeight = 592.28 / contentWidth * contentHeightlet imgHeight = 592.28 / contentWidth * contentHeight// 1.0 清晰度0-1let pageData = canvas.toDataURL('image/jpeg', 1.0)if(type) {// 生成图片//创建一个 a 标签，并设置 href 和 download 属性const el = document.createElement("a");// 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式el.href = pageData;el.download = title;// 创建一个点击事件并对 a 标签进行触发const event = new MouseEvent("click");el.dispatchEvent(event);} else {// 生成 pdf//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页// l 横向 默认竖向let PDF = new JsPDF('l', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')}})}}
}

3、全局引入实现方法

在项目文件main.js中引入定义好的实现方法，并且注册

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

4、在相关要导出的页面中，点击时调用绑定在vue原型上的getPDF方法

//html<div id="pdfDom"><!-- 要下载的HTML页面,页面是由后台返回 --><div v-html="pageData"></div>
</div>
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>
//js
export default {data () {return {htmlTitle: '页面导出PDF文件名',downType: true }}}

更多内容查看博客：vue实现HTML转PDF

证书生成的小demo：vue生成证书并支持图片下载和PDF下载

生成证书模板---vue实现HTML转PDF相关推荐

vue 生成证书模板并支持图片下载和导出PDF的demo
demo 使用的是html2canvas 和jspdf 插件, 不明白的先去看这个插件使用下面是我的一个例子,大家可以参考: 注意: 请先看上面文章,安装插件和配置,这里不重复说了哦 index. ...
java生成打印合同模板,生成合同模板时，html转pdf
html转pdf 添加itext依赖: com.itextpdf itextpdf 5.5.11 添加依赖: com.itextpdf.tool xmlworker 5.5.11 先创建html,然后 ...
Java根据PDF表单模板和CSV表格批量生成证书等文件
最近遇到需求,需要批量生成800+个证书,所以写了一个简单个工具,原理就是PDF表单,读取csv表格中的数据,然后批量生成,比较通用的一个工具,所以分享一下 import com.itextpdf.t ...
Java生成证书类pdf
内容借鉴至:https://blog.csdn.net/ITBigGod/article/details/81155483 1.准备模板图片 2.准备Adobe Acrobat 工具下载地址: 链接 ...
java 生成证书图片_java生成自定义证书图片1 - 制作证书word模板
最近做项目遇到一个需求,生成指定数据的证书图片(比如毕业证,在空的模板中输入自定义的姓名.日期等信息),尝试了许多方法,最终完美地实现了这个需求. 以下内容为制作证书图片的第一步,制作证书word模板 ...
SpringBoot根据模板生成Word文件，然后Word转PDF
1.在pom文件中导入相关依赖 <dependency><groupId>cn.afterturn</gro ...
Word制作生成html模板替换动态值为占位符使用Java转为pdf文件
引言最近开发遇到一个需求,公司法务给了一个word合同模板,需要替换里面的动态值为具体业务数据,然后生成pdf文件进行电子签章. 在网上找寻各种方法,发现很多都是需要特定工具,或者代码不全运行不起来 ...
VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
【设计模式】合同PDF生成：模板设计模式
场景最近公司在搞新OA系统,有个比较大的需求就是在线生成合同模板的PDF文件.合同流程大概是这样的: 而生成合同PDF文件这个需求说来也不复杂,其实就是这样: 总的来说就是查询数据,调用接口,保存流 ...

生成证书模板---vue实现HTML转PDF

文章目录

1、下载插件模块

2、定义功能实现方法

3、全局引入实现方法

4、在相关要导出的页面中，点击时调用绑定在vue原型上的getPDF方法

生成证书模板---vue实现HTML转PDF相关推荐

最新文章

热门文章