VUE中：printJS使用，附带JsBarcode条码生成器，网页转图片html2canvas，base64上传保存处理，二维码生成库qrcode，二维码/条码扫描识别，domtoimage

官网
JsBarcode官网
JsBarcode的GitHub-WIKI
我的项目需求只需要将配置好的HTML与CSS样式传入进去就好，较为简单。

九个月后html2canvas出现线上问题 设置了跨域但依然出现跨域问题，尝试解决失败，换用domtoimage

安装： npm install print-js --save
使用： import print from 'print-js'

printJS函数封装：

print (ref, title, style, type, jsonData, borderHeadStyle, gridStyle, css) {
   
         printJS({
   
            printable: ref,// 要打印内容的id
            type: type || 'html', // 可以打印html,img详细的可以在官方文档
            style: style || '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}', // 打印的内容是没有css样式的，此处需要string类型的css样式
            header: title || null,https://printjs.crabbly.com/中查询
            headerStyle: 'font-size:6px;font-weight:600;text-align:center;padding:15px 0 10px 0;', // 标题设置
            properties: jsonData || [], // json数据元
            gridHeaderStyle: borderHeadStyle || 'font-size:6px;font-weight:400;height:40px;line-height:40px;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;', // json格式表头样式
            gridStyle: gridStyle || 'font-size:1px;font-weight:200;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;', // json各式表哥央视
            scanStyles: false, // 不适用默认样式
           repeatTableHeader: false, // 打印json表头只显示在第一页
            css: css || null // css url
        });
     },

但在实际开发过程中遇到了：直接传入DOM节点 CSS样式全部失效的问题，由于显示内容多，自己手写JS会非常麻烦。故引入第二个库，网页转图片：
安装：npm install --save html2canvas
使用：import html2canvas from 'html2canvas';
使用代码：

html2canvas(this.$refs.printContent).then(canvas => {
   
            let dataURL = canvas.toDataURL('image/png');
            this.imgUrl = dataURL;
            printJS({
   
                printable: dataURL,
                type: 'image'
            });
        });

若打印的图片不清晰请戳这里
或这里
🔺🔺html2canvas只适用于页面截图，若是需要将元素隐藏再父元素中点击按钮打印而不是跳转新页面的话，隐藏元素会导致不能转换图片
🔺🔺且不支持部分CSS样式（例如float浮动样式）。当元素内容打印不出来时注意也可以选择生成二维码而不是条码：qrcode下载源:参考案例在项目文件夹内执行:npm install --save qrcode全局安装:npm install -g qrcode在需要的页面引入 import QRcode from "qrcode";使用：

//canvas是HTML的绘图标签,省略返回新绘图
//sample text:输入你需要转换为二维码的字符串,可以是网址链接
//function在执行完成时的回调函数
QRCode.toCanvas(canvas, 'sample text', function (error) {
   
  if (error) console.error(error)
  console.log('success!');
})

开发代码实例：

        async createImg(){
   
            await this.$nextTick();// this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
            this.imgUrl = await this.makeImg();
            printJS({
   
                printable: