vue 打印页面（解决打印预览不全的问题）

野性酷女 2022-09-10 12:14 1032阅读 0赞

### 不同分辨率下，页面内容打印不全的问题 ###

参考的博客  
**https://www.cnblogs.com/scallop/p/14184580.html**  
**[参考的博客（scallop）][scallop]**

安装插件

print-js，html2canvas

页面使用

<template>
    	<div>
    		<el-button class="acticedBtn" @click="printFn">打印</el-button>
    		<div ref="printId">
    		 打印的内容
    		</div>
    	</div>
    </template>
    <script>
    import printJS from 'print-js';
    import html2canvas from 'html2canvas';
    export default { 
    	methods:{ 
    		printFn(){ 
    			const printContent = this.$refs.printId;
    			// 获取dom 宽度 高度
    			const width = printContent.clientWidth;
    			const height = printContent.clientHeight;
    			// 创建一个canvas节点
    			const canvas = document.createElement('canvas');
    		
    			const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
    			canvas.width = width * scale; // 定义canvas 宽度 * 缩放
    			canvas.height = height * scale; // 定义canvas高度 *缩放
    			canvas.style.width = width * scale + 'px';
    			canvas.style.height = height * scale + 'px';
    			canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale
    		
    			const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
    			const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
    		
    			html2canvas(printContent, { 
    				canvas,
    				backgroundColor: null,
    				useCORS: true,
    				windowHeight: document.body.scrollHeight,
    				scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
    				scrollY: -scrollTop
    			}).then((canvas) => { 
    				const url = canvas.toDataURL('image/png')
    				printJS({ 
    				printable: url,
    				type: 'image',
    				documentTitle: '', // 标题
    				style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
    				})
    			}).catch(err=>{ 
    				console.error(err);
    			})
    		}
    	}
    }
    </script>

[scallop]: https://www.cnblogs.com/scallop/p/14184580.html