本文主要是介绍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)},这篇关于vue 实现调起打印机打印图片 与图片下载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
