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

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

---

前言

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

打印页面中显示的部分内容，由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文件是两码事