javascript - How can I use window print in modal vue?
问题描述
My vue component like this :
<template>
...
<b-modal id="modalInvoice" size="lg" title="Invoice">
<Invoice/>
<div slot="modal-footer" class="w-100">
<b-btn size="sm" class="float-right" variant="warning" @click="show=false">
<i class="fa fa-print"></i> Print
</b-btn>
</div>
</b-modal>
...
<b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i>Checkout</b-btn>
...
</template>
<script>
...
export default {
...
methods: {
print() {
window.print()
}
}
}
</script>
If I click print button, it works. But it displays the entire website. I just want if I click the print button, it only shows the contents of the modal
How can I do it?
解决方案
一种方法是创建模态的克隆并使用 css 来限制打印内容的可见性:
print () {
const modal = document.getElementById("modalInvoice")
const cloned = modal.cloneNode(true)
let section = document.getElementById("print")
if (!section) {
section = document.createElement("div")
section.id = "print"
document.body.appendChild(section)
}
section.innerHTML = "";
section.appendChild(cloned);
window.print();
}
@media screen {
#print {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#print, #print * {
visibility:visible;
}
#print {
position:absolute;
left:0;
top:0;
}
}
推荐阅读
- java - 为什么在android studio中反编译Parcelable类时构造函数中有一个空参数
- python - Python:使用win32com将对象插入到excel的特定行和列中
- c# - 从 Web API 调用 Microsoft 图形时出现无效令牌错误
- c++ - 如何解决两个不使用命名空间的第三方库之间的类名冲突?
- javascript - 用于查找内容的 Javascript
- c# - 当应用 AddForceAtPosition 时,Unity 对象会移动,而它应该只旋转
- python - Python pandas:应用于分隔值
- signalr-hub - SignalR Core:连接关闭并出现错误代码 1007
- android - 在按钮名称来自数据库的按钮上设置图像
- javascript - 如何在 SQL IN 之后放置一个字符串