需要创建一个标签,可以放在页面用样式隐藏起来
<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)
},