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

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

    <div id="printable-content" style="display: none"><div><el-imagestyle="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-buttonsize="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 = urllink.download = row.equipName; // 下载之后的文件名称document.body.appendChild(link)link.click()document.body.removeChild(link)// 释放 Blob URLwindow.URL.revokeObjectURL(url)},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/605991.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！