vue 指定html元素打印

正常的前端打印一般都是右键后直接点击打印，这样会直接认为当前的需求是直接打印当前页面。
这次我遇到的需求却是只打印我需要打印的地方。

image.png

这么一个页面真正要打印的是红色圈起来部分

运用技术点 “html2canvas” 和 “print-js”

    //用npm下载
    npm isntall html2canvas -s
    npm install print-js -s
   //使用页面引用
    import print from 'print-js'
    import html2canvas from 'html2canvas';
    /*--  我是根据打印按钮触发下面的事件  ---- */
    html2canvas(document.getElementById('print')).then(function(canvas) {
            var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
            // console.log(imgageData)
            print(imgageData, 'image');
    });

效果图（基本完美）

image.png