前端VUE下载PDF

main.js

//配置JS生成PDF的公共函数
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
app.config.globalProperties.getPdf = function() {
	var title = this.htmlTitle //PDF标题
	html2Canvas(document.querySelector('#pdfDom'), {
		allowTaint: true,
		taintTest: false,
		useCORS: true,
		//width:960,
		//height:5072,
		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')
	})
}

使用

<template>
	<el-dialog width="780px" :close-on-click-modal="false" v-model="visible" :show-close="false">
		<div id="pdfDom">
			<h2 class="title">员工请假单</h2>
			<table class="leave-table">
				<tr align="center">
					<td width="14%">姓名</td>
					<td width="16%">{
   
   { name }}</td>
					<td width="14%">性别</td>
					<td width="16%">{
   
   { sex }}</td>
					<td width="14%">部门</td>
					<td>{
   
   { dept }}</td>
				</tr>
				<tr>
					<td align="center">请假类别</td>
					<td colspan="5">{
   
   { type }}</td>
				</tr>
				<tr>
					<td align="center">请假时间</td>
					<td colspan="5">{
   
   { start }}&nbsp;&nbsp;~&nbsp;&nbsp;{
   
   { end }}</td>
				</tr>
				<tr>
					<td align="center">请假事由</td>
					<td colspan="5">{
   
   { reason }}</td>
				</tr>
				<tr>
					<td align="center">领导签字</td>
					<td colspan="2"></td>
					<td align="center">人事盖章</td>
					<td colspan="3"></td>
				</tr>
			</table>

			<p class="desc">备注：员工请假期间一切责任自负，假期结束后应及时返回工作岗位，否则按照旷工处理。</p>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="getPdf()" size="medium">下载请假单</el-button>
				<el-button size="medium" @click="cancel()">取消</el-button>

			</span>
		</template>
	</el-dialog>
</template>

<script>
export default {
	data: function() {
		return {
			visible: false,
			htmlTitle: '员工请假单',
			name: null,
			sex: null,
			dept: null,
			reason: null,
			start: null,
			end: null,
			type: null
		};
	},
	methods: {
		init(id) {
			this.visible = true
			this.name = null
			this.sex = null
			this.dept = null
			this.reason = null
			this.start = null
			this.end = null
			this.type = null
			this.$http('leave/searchLeaveById', 'POST', {id}, true, resp=>{
				this.name = resp.name;
				this.sex = resp.sex;
				this.dept = resp.deptName;
				this.reason = resp.reason;
				if (resp.type == 1) {
					this.type = '病假';
				} else if (resp.type == 2) {
					this.type = '事假';
				}
				this.start = resp.start;
				this.end = resp.end;
			})
		},
		cancel: function() {
			this.visible=false
		}
	}
};
</script>

<style lang="less" scoped="scoped">
@import url('leave_pdf.less');
</style>

页面必须要有id="pdfDom"的标签和data中的htmlTitle属性(htmlTitle: '员工请假单',)