安装

npm i jspdf-html2canvas
1

示例代码

<template>
    <div class="jcc fdc aic" >

		<a-button @click="print" class="print" type="primary">
			打印
		</a-button>
		
			<div v-html="preview"></div>
	</div>
</template>
<script>
		import jspdfHtml2canvas from 'jspdf-html2canvas'
export default {
    data(){
        return {
			printdata:'',
			preview:"",
        }
    },
	beforeCreate() {
		document.querySelector("head").removeChild(document.querySelector("head").children[17])
	},
	created() {
		this.preview = localStorage.getItem("newdata")
		this.printdata =JSON.parse( localStorage.getItem("print"))
	},
	methods:{
		/**
		 * 打印pdf
		 * jspdfHtml2canvas  参数1 dom 参数 打印配置
		 */
		print() {
			let that = this
				let htmlcontent = document.querySelector("."+that.printdata.classname)
			jspdfHtml2canvas(htmlcontent, {
				html2canvas: {
					scale: that.printdata.scale?that.printdata.scale:1,
					x: htmlcontent.getBoundingClientRect().left + 8.5,
					useCORS:true
				},
				output:that.printdata.name?that.printdata.name+".pdf":"llt-tool.pdf",
				windowWidth: htmlcontent.offsetWidth,
				windowHeight: htmlcontent.offsetHeight,
			})
			
		},
	}
}
</script>
<style lang="scss" scoped>
.print{
	position: fixed;
	top: 0;
	left: 0;
	width: 100px;
	height: 30px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59