记vue-print-nb打印图片失败

最新推荐文章于 2023-09-06 23:01:04 发布

式微不归

最新推荐文章于 2023-09-06 23:01:04 发布

阅读量519

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/choose_Mings/article/details/130573448

版权

<Modal
      v-model="qrCodeModal"
      footer-hide
      scrollable
      title="二维码打印"
      width="700"
      @on-ok="qrCodeModalSuccess"
    >
      <div ref="print">
        <Row :gutter="16" id="printMe">
          <i-col
            :span="6"
            style="margin-top: 10px"
            v-for="item in qrCodeImgList"
            :key="item.id"
          >
            <img
              :src="
                baseUrl +
                  '/smartsite/personbaseinfo/noauth/qrcode?id=' +
                  item.id +
                  '&size=300'
              "
              width="100%"
              style="margin: auto"
            />
            <Row style="text-align: center">
              <i-col :span="8">编号:</i-col>
              <i-col :span="10">{{ item.code }}</i-col>
            </Row>
            <Row style="text-align: center">
              <i-col :span="8">姓名:</i-col>
              <i-col :span="10">{{ item.name }}</i-col>
            </Row>
          </i-col>
        </Row>
      </div>
      <div style="text-align: center;margin: 20px 0 0 0;border: 0">
        <Button
          type="text"
          size="large"
          style="margin-right: 20px"
          @click="printObjClear"
        >
          取消
        </Button>
        <Button type="info" size="large" @click="printHandle">打印</Button>
      </div>
    </Modal>

直接使用vue-print-nb获取不到图片

import html2canvas from 'html2canvas';
import printJS from 'print-js';

使用html2canvas +printJS 将打印的图片转化格式，使用printJS 打印

    // 打来打印窗口
    printHandle() {
      let targetDom = this.$refs.print;
      html2canvas(targetDom, {
        backgroundColor: null,
        useCORS: true,
        height: targetDom.scrollHeight, //canvas高
        width: targetDom.scrollWidth //canvas宽
      }).then((canvas) => {
        const url = canvas.toDataURL();
        this.img = url;
        printJS({
          printable: url,
          type: 'image',
          documentTitle: ''
        });
      });
    },

这里要注意height和width要设置，我这里使用的dom的宽高