vue根据页面标签生成图片打印

安装npm install html2canvas
安装npm install print-js
import html2canvas from 'html2canvas';
import print from 'print-js'

<template>
  <div>
    <div id="content-to-convert" style="width: 772px;">
       <div>
         <div style="margin: 10px;" id="printBill">
           <div style="width: 100%;">
             <div style="text-align: center;"><h3>{{names}}</h3></div>
             <div style="text-align: right;margin-bottom: 3px;">打印时间：{{date}}</div>
           </div>
           <div v-for="(it,index) in tableDataPrunt" :key="index">
             <div style="display: flex;border-left: 1px solid #000000;" v-if="index == 0">
               <td style="padding: 5px;border-right: 1px solid #000000;border-bottom: 1px solid #000000;border-top: 1px solid #000000;"
               v-for="(column,index2) in tablesPrunt" :key="index2" v-if="column.print == 1" :width="column.width">{{column.labelName}}</td>
             </div>
             <div style="display: flex;border-left: 1px solid #000000;">
               <td style="padding: 5px;border-right: 1px solid #000000;border-bottom: 1px solid #000000;"
               v-for="(column,index2) in tablesPrunt" :key="index2" v-if="column.print == 1" :width="column.width">{{it[column.prop]}}888ww</td>
             </div>
           </div>
         </div>
       </div>
    </div>
    <button @click="convertToImageAndPrint">转换为图片打印</button>

    <div>
      <img :src="imgs"/>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import print from 'print-js'
export default {
  components: {

  },
  data() {
    return {
      imgs:"",
      date:"",
      names:"打印测试",
      tableDataPrunt:[
        {
          "billcode": "CS-000-2014-03-01-0002",
          "billdate": "2014-03-01",
          "billkind": "\u91c7\u8d2d\u6536\u8d27",
          "contractno": null,
          "detaildisc": 0,
          "empid": 4,
          "exrate": 0,
          "goodsid": 1119,
          "id": 3382,
          "lcunitprice": 0,
          "moneyName": null,
          "moneyid": 0,
          "o.traderid": 3,
          "shopid": 0,
          "shopname": "\u603b\u90e8",
          "traderid": 3,
          "tradername": "\u897f\u5b89\u6d5a\u901a\u7535\u5668\u516c\u53f8",
          "unitprice": 0,
          "unitquantity": 0
        },
      ],
      tablesPrunt:[{"label": "供应商", "prop": "tradername", "width": "118", "print": 1, "boot": 1, "labelName": "供应商", "table": "wb_trader", "tableProp": "name", "zid": "traderid", "type": "1"}, {"label": "供应商欠款", "prop": "scamt", "width": 120, "print": 0, "boot": 1, "labelName": "供应商欠款", "table": "wb_trader", "tableProp": "scamt", "zid": "traderid", "type": "1"}, {"label": "分支机构名称", "prop": "shopname", "width": "100", "print": 1, "boot": 1, "labelName": "分支机构名称", "table": "wb_shop", "tableProp": "name", "zid": "shopid", "type": "1"}, {"label": "单据类型", "prop": "billkind", "width": 80, "print": 1, "boot": 1, "labelName": "单据类型", "table": "", "tableProp": "", "zid": "billkind", "type": "1"}, {"label": "单据日期", "prop": "billdate", "width": "100", "print": 1, "boot": 1, "labelName": "单据日期", "table": "", "tableProp": "", "zid": "billdate", "type": "1"}, {"label": "单据编号", "prop": "billcode", "width": "170", "print": 1, "boot": 1, "labelName": "单据编号", "table": "", "tableProp": "", "zid": "billcode", "type": "1"}, {"label": "合同号", "prop": "contractno", "width": 80, "print": 1, "boot": 1, "labelName": "合同号", "table": "", "tableProp": "", "zid": "contractno", "type": "2"}, {"label": "币种", "prop": "moneyName", "width": "80", "print": 1, "boot": 1, "labelName": "币种", "table": "wb_money", "tableProp": "name", "zid": "moneyid", "type": "1"}, {"label": "汇率", "prop": "exrate", "width": "80", "print": 1, "boot": 1, "labelName": "汇率", "table": "", "tableProp": "", "zid": "exrate", "type": "1"}, {"label": "货品编码", "prop": "extendcode", "width": "100", "print": 0, "boot": 1, "labelName": "货品编码", "table": "wb_goods", "tableProp": "code", "zid": "goodsid", "type": "2"}, {"label": "货品名称", "prop": "extendname", "width": "150", "print": 0, "boot": 1, "labelName": "货品名称", "table": "wb_goods", "tableProp": "name", "zid": "goodsid", "type": "2"}, {"label": "规格", "prop": "specs", "width": "140", "print": 0, "boot": 1, "labelName": "规格", "table": "wb_goods", "tableProp": "name", "zid": "goodsid", "type": "2"}, {"label": "货品简称", "prop": "shortname", "width": 120, "print": 0, "boot": 0, "labelName": "货品简称", "table": "wb_goods", "tableProp": "shortname", "zid": "goodsid", "type": "2"}, {"label": "业务单位", "prop": "bunit", "width": "80", "print": 0, "boot": 1, "labelName": "业务单位", "table": "wb_goodsunit", "tableProp": "unitname", "zid": "unitid", "type": "2"}, {"label": "辅助单位", "prop": "punit", "width": "80", "print": 0, "boot": 1, "labelName": "辅助单位", "table": "wb_goodsunit", "tableProp": "unitname", "zid": "goodsid", "type": "2"}, {"label": "辅助单位数量", "prop": "pquantity", "width": "115", "print": 0, "boot": 1, "labelName": "辅助单位数量", "table": "wb_goodsunit", "tableProp": "unitname", "zid": "goodsid", "type": "2"}, {"label": "业务单位单价", "prop": "unitprice", "width": "115", "print": 0, "boot": 1, "labelName": "业务单位单价", "table": "", "tableProp": "", "zid": "unitprice", "type": "2"}, {"label": "业务单位单价(本)", "prop": "lcunitprice", "width": "115", "print": 0, "boot": 1, "labelName": "业务单位单价(本)", "table": "", "tableProp": "", "zid": "lcunitprice", "type": "2"}, {"label": "业务单位数量", "prop": "unitquantity", "width": "115", "print": 0, "boot": 1, "labelName": "业务单位数量", "table": "", "tableProp": "", "zid": "unitquantity", "type": "2"}, {"label": "采购货款", "prop": "goodsamt", "width": "100", "print": 0, "boot": 1, "labelName": "采购货款", "table": "", "tableProp": "", "zid": "goodsamt", "type": "2"}, {"label": "采购货款(本)", "prop": "lcgoodsamt", "width": "100", "print": 0, "boot": 1, "labelName": "采购货款(本)", "table": "", "tableProp": "", "zid": "lcgoodsamt", "type": "2"}, {"label": "税额", "prop": "taxamt", "width": "100", "print": 0, "boot": 1, "labelName": "税额", "table": "", "tableProp": "", "zid": "taxamt", "type": "2"}, {"label": "税额(本)", "prop": "lctaxamt", "width": "100", "print": 0, "boot": 1, "labelName": "税额(本)", "table": "", "tableProp": "", "zid": "lctaxamt", "type": "2"}, {"label": "金额", "prop": "amount", "width": "100", "print": 0, "boot": 1, "labelName": "金额", "table": "", "tableProp": "", "zid": "amount", "type": "2"}, {"label": "金额(本)", "prop": "lcamount", "width": "100", "print": 0, "boot": 1, "labelName": "金额(本)", "table": "", "tableProp": "", "zid": "lcamount", "type": "2"}, {"label": "采购费用", "prop": "alreadyapt", "width": "100", "print": 0, "boot": 1, "labelName": "采购费用", "table": "", "tableProp": "", "zid": "alreadyapt", "type": "2"}, {"label": "备注", "prop": "remark", "width": 120, "print": 0, "boot": 1, "labelName": "备注", "table": "", "tableProp": "", "zid": "remark", "type": "1"}, {"label": "凭证号", "prop": "credid", "width": 120, "print": 0, "boot": 1, "labelName": "凭证号", "table": "", "tableProp": "", "zid": "credid", "type": "1"}, {"label": "发票类型", "prop": "notetypename", "width": 120, "print": 0, "boot": 0, "labelName": "发票类型", "table": "wb_kind", "tableProp": "name", "zid": "notetype", "type": "1"}, {"label": "发票号", "prop": "noteno", "width": 120, "print": 0, "boot": 0, "labelName": "发票号", "table": "", "tableProp": "", "zid": "noteno", "type": "1"}, {"label": "付款方式", "prop": "payname", "width": 120, "print": 0, "boot": 0, "labelName": "付款方式", "table": "wb_paymethod", "tableProp": "name", "zid": "paymethodid", "type": "1"}, {"label": "结算帐户", "prop": "accountname", "width": 120, "print": 0, "boot": 0, "labelName": "结算帐户", "table": "wb_account", "tableProp": "name", "zid": "accountid", "type": "1"}, {"label": "票据号", "prop": "checkno", "width": 120, "print": 0, "boot": 0, "labelName": "票据号", "table": "", "tableProp": "", "zid": "checkno", "type": "1"}, {"label": "运输方式", "prop": "shiptypename", "width": 120, "print": 0, "boot": 0, "labelName": "运输方式", "table": "wb_kind", "tableProp": "name", "zid": "shiptype", "type": "1"}, {"label": "整单折扣", "prop": "disc", "width": 120, "print": 0, "boot": 0, "labelName": "整单折扣", "table": "", "tableProp": "", "zid": "disc", "type": "1"}, {"label": "已结算金额", "prop": "payamt", "width": 120, "print": 0, "boot": 0, "labelName": "已结算金额", "table": "", "tableProp": "", "zid": "payamt", "type": "1"}, {"label": "付款期限", "prop": "termdays", "width": 120, "print": 0, "boot": 0, "labelName": "付款期限", "table": "", "tableProp": "", "zid": "termdays", "type": "1"}, {"label": "付款日期", "prop": "paydate", "width": 120, "print": 0, "boot": 0, "labelName": "付款日期", "table": "", "tableProp": "", "zid": "paydate", "type": "1"}, {"label": "送货地址", "prop": "billto", "width": 120, "print": 0, "boot": 0, "labelName": "送货地址", "table": "", "tableProp": "", "zid": "billto", "type": "1"}, {"label": "送货人", "prop": "linkman", "width": 120, "print": 0, "boot": 0, "labelName": "送货人", "table": "", "tableProp": "", "zid": "linkman", "type": "1"}, {"label": "联系电话", "prop": "contactphone", "width": 120, "print": 0, "boot": 0, "labelName": "联系电话", "table": "", "tableProp": "", "zid": "contactphone", "type": "1"}, {"label": "仓库编码", "prop": "storecode", "width": 120, "print": 0, "boot": 0, "labelName": "仓库编码", "table": "wb_store", "tableProp": "code", "zid": "storeid", "type": "2"}, {"label": "仓库名称", "prop": "storename", "width": 120, "print": 0, "boot": 0, "labelName": "仓库名称", "table": "wb_store", "tableProp": "name", "zid": "storeid", "type": "1"}, {"label": "单价", "prop": "unitprice", "width": 120, "print": 0, "boot": 0, "labelName": "单价", "table": "", "tableProp": "", "zid": "unitprice", "type": "2"}, {"label": "折扣率", "prop": "detaildisc", "width": "80", "print": 0, "boot": 1, "labelName": "折扣率", "table": "", "tableProp": "", "zid": "disc", "type": "2"}, {"label": "折扣金额", "prop": "taxamt", "width": 120, "print": 0, "boot": 0, "labelName": "折扣金额", "table": "", "tableProp": "", "zid": "taxamt", "type": "2"}, {"label": "批号", "prop": "batchcode", "width": 120, "print": 0, "boot": 0, "labelName": "批号", "table": "", "tableProp": "", "zid": "batchcode", "type": "2"}, {"label": "被引用辅助数量", "prop": "referextqty", "width": 120, "print": 0, "boot": 0, "labelName": "被引用辅助数量", "table": "", "tableProp": "", "zid": "", "type": ""}, {"label": "批号", "prop": "batchcode", "width": 120, "print": 0, "boot": 0, "labelName": "批号", "table": "", "tableProp": "", "zid": "batchcode", "type": "2"}, {"label": "生产日期", "prop": "productdate", "width": 120, "print": 0, "boot": 0, "labelName": "生产日期", "table": "", "tableProp": "", "zid": "productdate", "type": "2"}, {"label": "有效日期", "prop": "validdate", "width": 120, "print": 0, "boot": 0, "labelName": "有效日期", "table": "", "tableProp": "", "zid": "validdate", "type": "2"}, {"label": "部门名称", "prop": "departmentname", "width": 120, "print": 0, "boot": 0, "labelName": "部门名称", "table": "wb_department", "tableProp": "name", "zid": "departmentid", "type": "1"}, {"label": "业务员", "prop": "empname", "width": 120, "print": 0, "boot": 1, "labelName": "业务员", "table": "wb_employ", "tableProp": "name", "zid": "empid", "type": "1"}, {"label": "制单人", "prop": "opname", "width": 120, "print": 0, "boot": 0, "labelName": "制单人", "table": "wb_operator", "tableProp": "opname", "zid": "opid", "type": "1"}, {"label": "审核人", "prop": "checkor", "width": 120, "print": 0, "boot": 0, "labelName": "审核人", "table": "wb_operator", "tableProp": "opname", "zid": "checkorid", "type": "1"}, {"label": "自定义字段1", "prop": "userdef1", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段1", "table": "", "tableProp": "", "zid": "userdef1", "type": "2"}, {"label": "自定义字段2", "prop": "userdef2", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段2", "table": "", "tableProp": "", "zid": "userdef2", "type": "2"}, {"label": "自定义字段3", "prop": "userdef3", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段3", "table": "", "tableProp": "", "zid": "userdef3", "type": "2"}, {"label": "明细备注", "prop": "dremark", "width": 120, "print": 0, "boot": 0, "labelName": "明细备注", "table": "", "tableProp": "", "zid": "remark", "type": "2"}, {"label": "自定义字段4", "prop": "userdef4", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段4", "table": "", "tableProp": "", "zid": "userdef4", "type": "2"}, {"label": "自定义字段5", "prop": "userdef5", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段5", "table": "", "tableProp": "", "zid": "userdef5", "type": "2"}, {"label": "自定义字段6", "prop": "userdef6", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段6", "table": "", "tableProp": "", "zid": "userdef6", "type": "2"}, {"label": "自定义字段7", "prop": "userdef7", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段7", "table": "", "tableProp": "", "zid": "userdef7", "type": "2"}, {"label": "自定义字段8", "prop": "userdef8", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段8", "table": "", "tableProp": "", "zid": "userdef8", "type": "2"}, {"label": "自定义字段9", "prop": "userdef9", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段9", "table": "", "tableProp": "", "zid": "userdef9", "type": "2"}, {"label": "自定义字段10", "prop": "userdef10", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段10", "table": "", "tableProp": "", "zid": "userdef10", "type": "2"}, {"label": "自定义字段11", "prop": "userdef11", "width": 120, "print": 0, "boot": 0, "labelName": "自定义字段11", "table": "", "tableProp": "", "zid": "userdef11", "type": "2"}, {"label": "自定义字段12", "prop": "userdef12", "width": 120, "print": 0, "boot": 1, "labelName": "自定义字段12", "table": "", "tableProp": "", "zid": "userdef12", "type": "2"}, {"label": "自定义字段13", "prop": "userdef13", "width": 120, "print": 0, "boot": 1, "labelName": "自定义字段13", "table": "", "tableProp": "", "zid": "userdef13", "type": "2"}, {"label": "自定义字段14", "prop": "userdef14", "width": 120, "print": 0, "boot": 1, "labelName": "自定义字段14", "table": "", "tableProp": "", "zid": "userdef14", "type": "2"}, {"label": "自定义字段15", "prop": "userdef15", "width": 120, "print": 0, "boot": 1, "labelName": "自定义字段15", "table": "", "tableProp": "", "zid": "userdef15", "type": "2"}],
    }
  },
  watch: {

  },
  //界面没出来前加载
  created() {
    let date = new Date();
    this.date = date.getFullYear() + '-' +
          ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
          ('0' + date.getDate()).slice(-2) + ' ' +
          ('0' + date.getHours()).slice(-2) + ':' +
          ('0' + date.getMinutes()).slice(-2) + ':' +
          ('0' + date.getSeconds()).slice(-2);
  },
  mounted() {

  },
  computed: {

  },
  methods: {
     // 标签生成图片保存
     // convertToImage() {
     //   html2canvas(document.getElementById('content-to-convert')).then(canvas => {
     //     // 创建一个临时的 a 标签用于下载
     //     const link = document.createElement('a');
     //     link.href = canvas.toDataURL();
     //     link.download = 'converted_image.png';
     //     link.click();
     //   });
     // }
     convertToImageAndPrint() {
       html2canvas(document.getElementById('content-to-convert'), { scale: 2 }).then(canvas => {
         const img = new Image();
         img.src = canvas.toDataURL();
         this.imgs = img.src
         // 跳转窗口
         //const previewWindow = window.open('', '_blank');
         //previewWindow.document.write(`<img src="${img.src}" />`);
         // this.pr(this.imgs)
         printJS({
            printable: img.src,
            type: 'image',
            header: '',
            targetStyles: [],
            scanStyles: false,
          });
       });
     },
  }
};
</script>

<style scoped>
  @media print {
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
   }
    #printBill {
      /* 确保打印的元素占据整个页面 */
      width: 100%;
      height: 100%;
    }
  }
</style>