VUE 网页生成 PDF[通俗易懂]
2023-06-13 09:11:33 时间
大家好,又见面了,我是你们的朋友全栈君。
保存当前网页为PDF格式到本地
一、安装依赖
1. npm install --save html2canvas // 作用是html转图片
2. npm install jspdf --save // 再将图片转为pdf
二、设置格式函数
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (title) {
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).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
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', '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 -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}
三、main.js引入
import htmlToPdf from './htmlToPdf';
Vue.use(htmlToPdf);
四、运用
五、遇到问题
如图,在导出文件时,发现网络错误,可能是因为下载器不支持,首先换浏览器试一次,如果可以下载,则就是下载器不支持。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145983.html原文链接:https://javaforall.cn
相关文章
- 实现简单前后端完全分离增删改查:node.js+mysql+vue
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue.js框架中权衡的艺术
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- 说说你对Vue的keep-alive的理解
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- jquery和vue冲突吗_jquery和vue的区别
- Vue子组件向父组件传值(this.$emit()方法)「建议收藏」
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- 前端开发:如何写一手漂亮的 Vue
- Vue学习笔记之npm install编译时报"Cannot read properties of null (reading ‘pickAlgorithm‘)"错误
- vue页面跳转
- Vue 实例、el、data
- 【Vue2】Vue的生命周期和钩子函数
- Vue结合Redis实现性能优化(vue引入redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)