Vue中打印网页的指定部分的几种方法

楔子

这里是以下会用到的一些知识和说明
可以在GitHub上下载打印插件，但是自己写更简单，所以我就自己写了
本例为打印网页上的一个表格
window.print()打印的是整个网页的HTML内容，不包括CSS
@media print{ ... }可以设置打印时样式

正文

网页效果：
目标：右键点击打印按钮时能打印表格，忽略下方的文字和图片，并且保留样式
思路：点击打印按钮时，将整个页面的HTML替换为目标区域的HTML，配合@media print{}保留样式，但是页面的HTML被替换后造成页面的改变，因此最后需要刷新一下页面

代码：

  <!--HTML部分--><!--将需要打印的部分用一个div框起来，给div一个id，这里用print--><div id="print"><table>...表格里面的内容...</table></div><!--将下面的打印函数绑定到打印按钮上--><button @click=print()>打印报销单</button>

//JS部分
//将这个函数绑定到打印按钮上
print(){let print = document.getElementsByClassName("print")[0]  //获取目标区域的HTML结构document.body.innerHTML = print.innerHTML   //替换网页的html内容window.print()   //打印window.location.reload()  //刷新页面，因为网页的html被替换后很丑}

/*css部分*/
/*用@media print{}保留打印时的样式*/
...直接写在style下的样式，在打印时会丢失,比如：...
table{border: 2px solid black;width: 80%;margin: 0 auto;border-collapse: collapse}
...写在@media print{}中的样式，打印时会保留，比如...
@media print {table{border: 2px solid black;width: 80%;margin: 0 auto;border-collapse: collapse}
}
/*写在@media print{}中的样式在不打印的时候不会生效，因此打印时的样式要写两遍，里面和外面各一遍*/

此时点击打印按钮的效果为
打印的效果并不理想，因为使用的是A4纸的尺寸，我们可以通过在@media print中设置size配合打印时的设置来解决这个问题
```
@page{size: landscape;margin: 0 ;}
```
最终的css部分

<style scoped>...在网页中正常显示的样式...@media print{@page{  size: landscape; /*对打印的尺寸进行设置*/margin: 0 ;  /*去掉上面的水印*/}...在打印时需要保留的样式...}
</style>

最后，在打印的选项中，选择纸张尺寸为Ledger即可
除了这种方法，还有其他的打印思路

将html刷新到iframe中，打印iframe 【不需刷新页面，但无法保留样式】

<!--HTML部分-->
<!--在html中插入一个iframe节点，插在哪里都行-->
<iframe src="" frameborder="0" width="0" height="0"></iframe>

//打印函数
print(){let print = document.getElementsByClassName("print")[0]  //获取目标区域doc = iframe.contentWindow.documentdoc.write(print.innerHTML)  //将目标区域的html写入iframeiframe.contentWindow.focus()iframe.contentWindow.print()  //打印iframe}

将页面中不需要打印的部分隐藏掉【不需刷新页面，可以保留样式，但是对绝对定位的元素不生效】
操作方法：在@media print{}中写一个no-print样式，例如：
```
@media print{.no-print:{display:none}
}
```
将这个类放到不需要打印的标签上，实现打印是隐藏
然后在打印按钮上绑定window.print()直接打印即可

Vue中打印网页的指定部分的几种方法相关推荐

传奇私服中检查人物穿戴指定装备的两种方法
在传奇私服中检查人物是否穿戴指定的装备,方法有两种,一种是使用GetUserItemName命令,另一种则是使用CHECKITEMW命令,这两个命令实现的功能都是一样的. GetUserItemNam ...
vue中打印插件vue-print-nb(一)——基本示例
vue中打印插件vue-print-nb(一)--基本示例 npm地址:https://www.npmjs.com/package/vue-print-nb 下载print.js地址:https:// ...
天地图在vue中的应用删除指定的标注
天地图在vue中的应用删除指定的标注天地图引入与初始化点这里查看详情一.添加标注添加不同的标注我是用了两个方法实现的,在添加标注的是时候给这个点起一个名,作为删除的标记 point(e) {v ...
vue中打印表格，打印不全的问题
vue中打印表格,打印不全的问题 html部分 <TableDetailsclass="table-box"ref="inventoryDetails"& ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
ai中如何插入签名_技巧不求人167期 Excel如何打印到1页纸的2种方法 Excel如何插入手写签名...
嗨,大家好,上期我们介绍了Excel如何制作漂亮的文件盒侧标签.今天我们继续分享,在日常excel编辑过程中,常常会遇到因为数列或者行数过多导致内容不全,根本就不能打印在一张纸上面,假如分开打印到两张 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
网页自适应手机屏幕的几种方法
网页自适应手机屏幕的几种方法一. 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, in ...
js中截取字符串前几位的两种方法slice()substring()
在Javascript使用字符串中,我们不一定需要全部的字符串,这时就需要截取字符串.本文主要介绍js中截取字符串前几位的两种方法:1.使用slice() 方法:2.使用substring() 方法. ...

Vue中打印网页的指定部分的几种方法

楔子

正文

Vue中打印网页的指定部分的几种方法相关推荐

最新文章

热门文章