【Vue】vue2导出页面内容为pdf文件，自定义选中页面内容导出为pdf文件，打印选中页面内容，预览打印内容

已于 2023-03-10 15:39:03 修改
阅读量3.9k 收藏 28
点赞数 6
分类专栏： Vue 文章标签： vue.js pdf javascript
于 2023-03-10 14:00:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51055690/article/details/129441036
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

打印页面中显示的部分内容，由div包括的所有内容都将被导出为pdf文件

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装html2canvas和jspdf

npm install --save html2canvas;
npm install --save jspdf

二、导出pdf使用步骤

1.在utils文件夹下创建htmlToPdf.js

在这里插入图片描述

代码如下（示例）：

// htmlToPdf.js
// 导出页面为PDF格式
/* 
 用法
1. main.js中引入
import htmlToPdf from '@/util/htmlToPdf'
Vue.use(htmlToPdf)

2. vue页面中调用
按钮中方法  @click="getPdf()"
data中声明变量 
data() {
	return {
		htmlTitle: "测试导出文件", // 生成pdf的名称 
		......
3. 打印内容 id必须为pdfDom
<div id="pdfDom" >
 */
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
	install(Vue, options) {
		Vue.prototype.getPdf = function() {
			var title = this.htmlTitle //
			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.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')
			})
		}
	}
}

2.在main.js中引入

代码如下（示例）：

import htmlToPdf from './utils/htmlToPdf.js'
Vue.use(htmlToPdf)

在这里插入图片描述

3.在页面中使用

页面内容代码

<!-- 页面主要内容，打印部分内容 start -->
<div id="pdfDom" class="tableBox" ref="print">
	<h1>2023年3月10日11:40:12</h1>
	<el-table :data="tableData" border stripe style="width: 600px">
		<el-table-column prop="date" label="日期" width="180"></el-table-column>
		<el-table-column prop="name" label="姓名" width="180"></el-table-column>
		<el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
	<p>测试结束</p>
</div>
<div class="onBtn">
	<el-button type="primary" @click="getPdf()">导出文件</el-button>
	<el-button type="success" @click="goPrint()">查看打印效果</el-button>
</div>

css样式

.tableBox {
	margin: 0 auto;
	width: 750px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px;
	border: 1px solid #3399cc;
	h1 {
		text-align: center;
	}
	.el-table {
		margin: 20px 0;
	}
}
.onBtn{
	margin: 30px auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

js变量

htmlTitle: "测试导出文件", // 生成pdf的名称 
tableData: [{
	date: '2016-05-02',
	name: '王小虎',
	address: '上海市普陀区金沙江路 1518 弄'
}, {
	date: '2016-05-04',
	name: '王小虎',
	address: '上海市普陀区金沙江路 1517 弄'
}, {
	date: '2016-05-01',
	name: '王小虎',
	address: '上海市普陀区金沙江路 1519 弄'
}, {
	date: '2016-05-03',
	name: '王小虎',
	address: '上海市普陀区金沙江路 1516 弄'
}]

在这里插入图片描述

  • getPdf方法为htmlToPdf.js中创建的，并且已经在main.js中引用为全局

  • data变量里面必须自定义一个title名称，要与js中相对应。
    在这里插入图片描述
    在这里插入图片描述

  • 导出内容div里面必须定义id，必须一致
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

三、打印预览

1. 引入print-js

npm install --save print-js

2.页面中import

import printJS from 'print-js'
import html2Canvas from 'html2canvas'

在这里插入图片描述

3. 点击方法

首先要在打印内容中加一个ref绑定
在这里插入图片描述
在这里插入图片描述

goPrint() {
	this.isPrint = true
	html2Canvas(this.$refs.print, {
		allowTaint: true,
		taintTest: false,
		useCORS: true,
		dpi: window.devicePixelRatio * 4,
		scale: 4
	}).then((canvas) => {
		const url = canvas.toDataURL()
		printJS({
			printable: url, // 要打印的id
			type: 'image',
			style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' //去除页眉页脚
		})
		this.isPrint = false
	})
}

总结

完整页面代码

<!-- 导出文件测试 -->
<template>
	<div class="container">
		<!-- 页面主要内容，打印部分内容 start -->
		<div id="pdfDom" class="tableBox" ref="print">
			<h1>2023年3月10日11:40:12</h1>
			<el-table :data="tableData" border stripe style="width: 600px">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>
			<p>测试结束</p>
		</div>
		<div class="onBtn">
			<el-button type="primary" @click="getPdf()">导出文件</el-button>
			<el-button type="success" @click="goPrint()">查看打印效果</el-button>
		</div>
	</div>
	<!-- 页面主要内容，打印部分内容 end -->

	</div>
</template>

<script>
	import printJS from 'print-js'
	import html2Canvas from 'html2canvas'
	export default {
		name: "exportPDF",
		data() {
			return {
				htmlTitle: "测试导出文件", // 生成pdf的名称 
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}]
			}
		},
		created() {},
		methods: {
			goPrint() {
				this.isPrint = true
				html2Canvas(this.$refs.print, {
					allowTaint: true,
					taintTest: false,
					useCORS: true,
					dpi: window.devicePixelRatio * 4,
					scale: 4
				}).then((canvas) => {
					const url = canvas.toDataURL()
					printJS({
						printable: url, // 要打印的id
						type: 'image',
						style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' //去除页眉页脚
					})
					this.isPrint = false
				})
			}
		},
	}
</script>

<style scoped lang="less">
	.container {
		.tableBox {
			margin: 0 auto;
			width: 750px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20px;
			border: 1px solid #3399cc;

			h1 {
				text-align: center;
			}

			.el-table {
				margin: 20px 0;
			}
		}

		.onBtn {
			margin: 30px auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>

弹出打印框的另一种方式

下载安装

npm install --save vue-print-nb

main.js引入

// vue打印插件 vue-print-nb
import Print from 'vue-print-nb'
Vue.use(Print)

用法
在这里插入图片描述
效果就是弹出浏览器自带的打印，与导出pdf文件是两码事
在这里插入图片描述

阿民不加班
关注
  • 6
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue实现打印，导出为pdf（纯前端且亲测有用）
g1437353759的博客
03-17 6304
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.downloadHtmlToPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pr.
vue2实现纯前端导出pdf
m0_64603959的博客
07-20 620
我这里有两个方案:第一就是导出word,第二就是点击事件先跳转页面,在另一个页面导出,这样用户也可以在导出之前看到自己想要导出的内容。最后在页面点击就可以导出你想要的pdf了,但是这个pdf和页面样式是挂钩的,如果导出的东西页面没有,那么在pdf里也不会展示。最后一步就是.vue文件里的代码。第二步封装一个js方法。
前端在vue2框架中导出PDF
weixin_45630548的博客
06-02 1872
【代码】前端使用jsPDF、html2canvas导出pdf。
Vue2使用 jsPDF 及autoTable 插件 打印表格及图片
最新发布
CSDN18202250010的博客
05-22 184
【代码】Vue2使用 jsPDF 及autoTable 插件 打印表格及图片。
Vue表格导出Pdf和Excel文件
suixishix的博客
02-24 1293
Vue表格导出Pdf和Excel文件
Vue 如何将网页转换成PDF实现步骤以及问题解决：
weixin_54515240的博客
03-03 7239
vue/vue3 中如何将页面转换成pdf，并且解决pdf清晰度和文件大小问题
Vue如何将页面导出成PDF文件
10-14
在Vue应用中，将页面导出为PDF文件通常涉及到前端技术的组合，包括HTML2Canvas和jsPDF这两个库。这两个库分别用于将HTML内容转换为Canvas图像，然后将Canvas图像进一步转换为PDF文档。以下是对这个过程的详细解释： ...
Vue将页面导出为图片或者PDF
10-16
总结，Vue导出页面为图片或PDF主要涉及以下步骤： 1. 安装必要的库：`html2canvas` 和 `jspdf`。 2. 导入并使用这些库，将页面HTML转换为canvas。 3. 将canvas内容转换为图片或PDF格式。 4. 下载生成的图片或PDF文件...
Vue导出页面为PDF格式的实现思路
10-18
主要介绍了Vue导出页面为PDF格式的实现思路，其实思路也很简单，就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
vue实现word，pdf文件的导出功能
10-18
给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能
qq_37193887的博客
03-17 1165
基于window.html2canvas的打印功能。适用于打印浏览器上内容。将内容转换成图片来导出成PDF文件。VUE打印功能 做一个记录 直接封装成一个方法printPDF vue项目直接调用打印方法：this.printPDF(document.getElementById("printPDF"),"打印文件的名称"); (document.getElementById("print...
记一次使用vue+springboot生成pdf文件并导出
qq_38599266的博客
04-27 2127
当在界面点击导出pdf时，向后端发起请求。如果是前后端分离项目，需要放行此地址。
Vue页面生成PDF的最佳方法推荐
lishuaihao的博客
08-10 8270
最近项目有个需求，将系统统计的数据生成分析报告，然后可以导出成PDF。这种方法可以有两种，一种是直接调用打印，用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差，且体验不好，显然不是我们想要的效果。那么第二种方法的实现思路是什么呢？首先生成报告页面，也就是常规页面；然后将页面转换成图片（ 用到的组件 html2canvas ）；最后将图片导出成PDF（ 用到的组件 jspdf ）。...
vue中使用html2canvas+jsPDF实现pdf的导出
weixin_45956838的博客
08-16 1989
vue中使用html2canvas+jsPDF实现pdf的导出
Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 5190
在做项目时有这么一个需求，需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件，可以在网上下载，也可以使用本地window/font/路径下的文件。选择你本地的ttf文件，点击“Create”按钮，会生成一个js文件。上面乱码解决了，但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件，中文是乱码。在导出多页的时候，希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。
在Vue中，如何将页面直接转成PDF并下载？
m0_46219714的博客
03-27 2626
vue页面转pdf
2020-11-05
weixin_42661160的博客
11-05 280
react中如何导出pdf 下载组件html2canvas 获取dom元素内容 ```javascript const download = () => { var element = document.getElementById("data"); // 这个dom元素是要导出pdf的div容器 var w = element.offsetWidth; // 获得该容器的宽 var h = element.offsetWidth; // 获得该容器的高
vue2中导出页面内容为word
05-05
在Vue2中导出页面内容为Word，可以使用jsPDF和html2canvas这两个库。 首先安装这两个库： ``` npm install jspdf html2canvas --save ``` 然后在需要导出的页面中添加一个按钮，点击按钮时触发导出操作： ```html <template> <div> <h1>这是需要导出的页面内容</h1> <p>这里是内容...</p> <button @click="exportWord">导出为Word</button> </div> </template> ``` 在script中引入jsPDF和html2canvas，并编写导出操作的代码： ```javascript import jsPDF from 'jspdf' import html2canvas from 'html2canvas' export default { name: 'ExportWord', methods: { exportWord() { // 获取需要导出的HTML元素 const element = document.getElementById('export-content') // 使用html2canvas将HTML元素转为canvas html2canvas(element).then(canvas => { // 计算图片宽高比 const imgWidth = 210 const pageHeight = 297 const imgHeight = canvas.height * imgWidth / canvas.width let heightLeft = imgHeight // 创建一个jsPDF实例 const pdf = new jsPDF('p', 'mm', 'a4') // 将canvas转为图片形式，并添加到PDF中 const imgData = canvas.toDataURL('image/png') pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight) // 逐页添加图片到PDF中 while (heightLeft >= 0) { const position = heightLeft - pageHeight pdf.addPage() pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight) heightLeft -= pageHeight } // 保存PDF文件 pdf.save('export.pdf') }) } } } ``` 注意，这里使用了`element`变量获取需要导出的HTML元素，要确保该元素在页面中存在且有正确的`id`值。 此外，为了让导出的PDF文件更加美观，可以在HTML中添加一些CSS样式来调整页面布局和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿民不加班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值