前端调用电脑打印弹窗，实现任意区域内容打印功能

描述：当需要打印的内容是比较灵活（不只有表格）的情况下，可通过此方法实现

​​​​​​​

1.下载html2canvas、printJs（如果依赖中有直接引入）

2.引入依赖

 import html2canvas from 'html2canvas'
 import printJs from "print-js";

3.在打印区域的最大div绑定ref，其外层的div长款要有固定值

4.打印按钮调用的方法

printWay() {
                const printContent = this.$refs.print;
                // 获取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);
                });  
            }