vue里根据路径打印图片,图片在浏览器里可以显示,点了打印以后在打印预览里就读取不到了,大佬们有什么办法解决么
<div id="print">
<img src="../../../../src/image/191106200010091.png" />
<img src="http://localhost:8001/191119200010048.png" />
</div>
<a-button v-print="'#print'">打印</a-button>print() {
this.$print(_this.$refs.print) //$refs的值要和html里的ref一致
},
<div id="print">
<img src="../../../../src/image/191106200010091.png" />
<img src="http://localhost:8001/191119200010048.png" />
</div>
<a-button v-print="'#print'">打印</a-button>print() {
this.$print(_this.$refs.print) //$refs的值要和html里的ref一致
},
// 原生的打印实现,将打印内容插入到body,打印完删除dom
let targe = document.getElementById('printHtml')
let content = document.createElement('div')
content.id = 'printContent'
content.innerHTML = target.innerHTML
document.body.appendChild(content)
window.print()
document.body.removeChild(content)
// 设置css只打印指定html
@media print {
body > *:not(#printContent) {
display: none;
}
}@media screen {
#printContent {
display: none;
}
}[/code]
<el-button v-print="'#printTest'">打印</el-button>
<html><head> <style>
@media print {
body>*:not(#printContent) {
display: none;
}
} @media screen {
#printContent {
display: none;
}
}
</style>
</head><body>
<div id="printHtml">
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="">
<div>打印其他文字内容</div>
</div>
<input type="button" value="打印" onclick="printHtml()">
<script>
function printHtml() {
// 原生的打印实现,将打印内容插入到body,打印完删除dom
let target = document.getElementById('printHtml')
let content = document.createElement('div')
content.id = 'printContent'
content.innerHTML = target.innerHTML
document.body.appendChild(content)
window.print()
document.body.removeChild(content)
}
</script>
</body></html>
不行还是没试过?如果试过应是报错变量不存在
不需要
print() {
this.$print(_this.$refs.print) //$refs的值要和html里的ref一致
},
这一段
只用上面的一个按钮。一个img就可以了。