vue 实现调起打印机打印图片与图片下载

最新推荐文章于 2024-03-13 21:40:55 发布

可恨的资本家

最新推荐文章于 2024-03-13 21:40:55 发布

阅读量843

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Tttrycatch/article/details/135463672

版权

需要创建一个标签，可以放在页面用样式隐藏起来

    <div id="printable-content" style="display: none">
      <div>
        <el-image
          style="width: 60px; height: 60px; border-radius: 50%"
          v-if="barrcodePicture"
          :src="baseUrl + barrcodePicture"
          :preview-src-list="[baseUrl + barrcodePicture]">
        </el-image>
      </div>
      <!-- 待打印的内容 -->
    </div>

    handleUpdate(row) {
      this.barrcodePicture = row.equipBarPic;
      setTimeout(() => {
        // 获取待打印的内容
        let printableContent = document.getElementById('printable-content').innerHTML;
        // 创建一个新的窗口并加载打印内容
        let printWindow = window.open('', '_blank');
        printWindow.document.write('<html><head><title>打印内容</title></head><body>' + printableContent + '</body></html>');
        // 执行打印操作
        printWindow.document.close();
        // 如果内容中有图片或其他需要一定时间加载的，请使用注释中的延时打印
        printWindow.print()
      }, 200)
      // printWindow.print();
      // var a = this.baseUrl + row.equipBarPic
    },

下载图片

      <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="pictureDownload(scope.row)"
            v-hasPermi="['bill:barcodelog:edit']"
          >图片下载
          </el-button>

    async pictureDownload(row) {
      // 获取图片对象和画布对象
      const imageUrl = this.baseUrl + row.equipBarPic;
      const response = await fetch(imageUrl)
      const blob = await response.blob()
      // 创建下载链接
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = row.equipName; // 下载之后的文件名称
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      // 释放 Blob URL
      window.URL.revokeObjectURL(url)
    },