vue中实现将页面或者div内容导出为pdf格式

将Vue单页面转成pdf并下载

步骤1:下载对应的库

npm install html2canvas;npm install jspdf --save

步骤2:创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下,编写如下代码:

// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function () {var title = this.htmlTitle  //DPF标题html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true,taintTest: false,useCORS: true,y:72, // 对Y轴进行裁切// width:1200,// height:5000,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4 //按比例增加分辨率 }).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet 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 -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
}
// main.js
import htmlToPdf from '@/util/htmlToPdf'
Vue.use(htmlToPdf)

步骤三:在vue页面中给需要打印的区域一个div标签,然后给div一个id,id名和htmlToPdf.js中选择的名字一致,代码如下:

<div id="pdfDom">... 将要打印的内容放入其中
</div>

步骤四:在data节点中声明一个htmlTitle变量,指定为pdf文件的文件名

data() {return {htmlTitle: '要生成pdf的文件名'}
}

步骤五:在vue页面中添加一个button按钮,事件名和htmlToPdf.js中的方法名保持一致。

<el-button @click="getPdf()">PDF</el-button>

欧克了,完成以上步骤就可以实现div中内容的转为pdf并下载文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【二】的&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文…

adb shell setprop 、开发者选项

App性能调试详解 Android App性能监控工具 更多系统属性参考 一、开启 GPU Render 的profiling bar&#xff1a; Gpu渲染速度 adb shell setprop debug.hwui.profile true adb shell setprop debug.hwui.profile visual_bars adb shell setprop debug.hwui.profile visual…

基于5G边缘网关的储能在线监测方案

近年以来&#xff0c;光伏、风力、水力发电等产业发展迅速&#xff0c;新能源在电力市场的占比持续增加&#xff0c;已经成为电力系统的重要组成部分。但由于光伏、风力、水力等发电方式存在天然的波动性&#xff0c;因此也需要配套储能、蓄能系统&#xff0c;保障新能源运行和…

股票预测和使用LSTM(长期-短期-记忆)的预测

一、说明 准确预测股市走势长期以来一直是投资者和交易员难以实现的目标。虽然多年来出现了无数的策略和模型&#xff0c;但有一种方法最近因其能够捕获历史数据中的复杂模式和依赖关系而获得了显着的关注&#xff1a;长短期记忆&#xff08;LSTM&#xff09;。利用深度学习的力…

UE4/5Niagara粒子特效之Niagara_Particles官方案例:2.4->3.2

之前的案例 UE4/5Niagara粒子特效之Niagara_Particles官方案例&#xff1a;1.1-&#xff1e;1.4_多方通行8的博客-CSDN博客 UE4/5Niagara粒子特效之Niagara_Particles官方案例&#xff1a;1.5-&#xff1e;2.3_多方通行8的博客-CSDN博客 2.4 Location Events 这次的项目和之…

VUE3封装EL-ELEMENT-PLUS input组件

VUE3封装EL-ELEMENT-PLUS input组件 完整代码 <template><div><div><div class"lable_top" v-if"label"><label :class"lable_sty">{{ label }}</label></div><el-inputv-model"inputValue&…

自动化测试之Selenium

自动化测试Selenium介绍环境搭建如何操作浏览器定位元素css类选择器定位元素xpath定位元素css选择语法xpath选择语法 常用操作添加等待打印信息浏览器更多操作键盘事件鼠标事件特殊场景只选复选框iframe标签下拉框处理弹窗显示上传文件 关闭浏览器切换窗口截图 自动化测试 自动…

JavaSE 认识String类

目录 1 创建字符串2 字符串比较相等3 字符串常量池4 理解字符串不可变5 字符、字节与字符串5.1 字符与字符串5.2 字节与字符串5.3 小结 6 字符串常见操作6.1 字符串比较6.2 字符串查找6.3 字符串替换6.4 字符串拆分6.5 字符串截取6.6 其他操作方法 7 StringBuffer 和 StringBui…

【Linux】文件的描述符和重定向

文件的描述符和重定向 C语言的文件读写操作代码 open系统打开文件方法系统读写文件操作文件描述符文件重定向怎么理解文件缓冲区 C语言的文件读写操作 文件写入 fputs int fputs(const char *s, FILE *stream); s&#xff1a;要写入的字符串 stream&#xff1a;要写入对应的目标…

TCP最大连接数问题总结

最大TCP连接数量限制有&#xff1a;可用端口号数量、文件描述符数量、线程、内存、CPU等。每个TCP连接都需要以下资源&#xff0c;如图所示&#xff1a; 1、可用端口号限制 Q&#xff1a;一台主机可以有多少端口号&#xff1f;端口号与TCP连接&#xff1f;是否能修改&#x…

echarts 之 科技感进度条

1.图片展示 2.代码实现 /* ng qty 进度条 */ <template><div class"ngqty-progress"><div class"ngqty-info"><span>X4</span><span>50%</span></div><div :id"barNgQtyProgress index" c…

Java进阶(7)——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解

目录 引出从ArrayList到Linkedlist手动实现ArrayList从ArrayList到LinkedList 总体设计Node类Node的方法&#xff1a;根据index找node 增删改查的实现增加元素删除元素修改元素查询元素 toString方法完整代码List接口类LinkedList的实现测试类 总结 引出 1.linkedList的节点&am…

从0开始学Python 01

Python学习01 文章目录 Python学习0101-字面量02-注释注释的分类1.单行注释2.多行注释 03-变量04-数据类型1.type()语句 05-数据类型转换常见的转换语句代码演示 06-标识符标识符命名规则1.内容限定&#xff1a;2.大小写敏感&#xff1a;3.不能使用关键字代码示例&#xff1a; …

MySQL Connection not available.

Mysql 报错 最近部署在服务器上的mysql总是报这种错。 但是在服务器上&#xff0c;使用命令行是可以登录进mysq的。 cursor db.cursor() File “/home/ubuntu/miniconda3/envs/chatbot_env/lib/python3.9/site-packages/mysql/connector/connection_cext.py”, line 700, in …

基于JJWT理解JWT,JWS,JWE

JWT &#xff0c; 全写JSON Web Token, 是开放的行业标准RFC7591&#xff0c;用来实现端到端安全验证. 从开发者理解的角度来说&#xff1a; JWT 是一个定义传递信息的标准JWT 的Token是一个Base64编码的字符串&#xff0c; 类似 eyJhbGciOiJIUzI1NyJ9.eyJzdWIiOiJvc2NhciJ9.…

[Python进阶] 类的设计模式

4.11 设计模式 在Python中&#xff0c;类的设计模式是指一种通用的解决方案或设计模板&#xff0c;针对特定的问题或需求构建类结构&#xff0c;并提供相关的方法和属性。这些设计模式可以帮助开发人员遵循最佳实践、提高代码质量、增强可读性、降低维护成本。 需要注意的是&a…

房屋结构健康监测,科技助力让建筑更安全

房屋建筑是人们赖以生存的场所&#xff0c;然而当前我国许多房屋已经达到了使用寿命的中期&#xff0c;房屋的安全系数逐年降低&#xff0c;风险也随着时间的推移而累积。长期以来&#xff0c;我国的房屋普遍存在寿命短、隐患多的问题&#xff0c;“重建设&#xff0c;轻管理”…

探索PDF校对:为何这是现代数字文档的关键步骤

在今日的数字化浪潮中&#xff0c;文档的创建与分享从未如此频繁。尤其是PDF&#xff0c;作为一个普遍接受的标准文件格式&#xff0c;其在企业、学术和日常生活中的应用已经无处不在。但随之而来的挑战是如何确保文档的准确性和专业性。让我们深入探索PDF校对的重要性以及它为…

[国产MCU]-W801开发实例-定时器

定时器 文章目录 定时器1、定时器介绍2、定时器驱动API3、定时器使用示例本文将详细介绍如何使用W801的定时器模块。 1、定时器介绍 W801的定时器包含一个32-bit自动加载的计数器,该计数器由系统时钟经过分频后驱动。 W801有 6路完全独立定时器。实现了精确的定时时间以及中断…

element-ui中的el-table的summary-method(合计)的使用

场景图片&#xff1a; 图片1&#xff1a; 图片2&#xff1a; 一&#xff1a;使用element中的方法 优点&#xff1a; 直接使用summary-method方法&#xff0c;直接&#xff0c;方便 缺点&#xff1a; 只是在表格下面添加了一行&#xff0c;如果想有多行就不行了 1&#xff1a;h…