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

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

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

下载图片

      图片下载
          
    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)
    },

你可能感兴趣的:(vue.js,javascript,前端)