vue 打印页面（解决打印预览不全的问题）
<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>