vue中完成页面局部打印效果_vue局部打印_前端挖掘机的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

第一种（需要的打开新的窗口，用户有感知）

实现思路：获取需要打印的部分，打开新的窗口，将需要打印的部分放到新的窗口，并且调用print方法实现打印，新页面只有需要打印的东西，所以可以直接全局打印

	var print= document.getElementById("print").innerHTML;
	var newWindow = window.open();
	newWindow.document.write(dom);
	newWindow.print();
这种方式我们需要把样式写成行内样式，并且打开的窗口不关闭，原本的页面也无法操作 
第二种（用户无感知）
 
 实现思路：在body中加一个div与vue入口接口app同级作为打印部分的根节点，打印的时候，将需要打印的部分截取放入div中，这时候需要用到css进行处理 
/* 隐藏app元素，让页面只剩下需要打印的部分 */
@media print {
  #app {
    display: none;
/* 设置需要打印部分的样式 */
  .printTemplate {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
通过媒体查询，监听print事件，然后隐藏app，这时候页面上只剩下需要打印的部分。
 并且这段样式不会让页面元素隐藏，只会生效在打开的打印窗口上，用户无感知 
      const printTemplate = document.getElementsByClassName("printTemplate")[0];
      if (printTemplate) {
      //判断上次打印的东西是否还在，在就删除
        document.body.removeChild(printTemplate);
      try {
      //重新获取到需要打印的部分，然后赋值到根元素
        var dom = document.getElementsByClassName("printContent")[0].innerHTML; //需要打印的部分
        //创建新的标签，将需要打印的部分放入body元素下，再触发prit方法，这个时候，媒体查询监听到打印事件就会隐藏页面其他部分
        //并且这种效果只会作用到打印窗口上面，页面原本的元素不受影响
        var newDom = document.createElement("div");
        newDom.className = "printContent printTemplate";
        newDom.innerHTML = dom;
        document.body.appendChild(newDom);
        window.print();
      } catch (e) {
        console.log(e);
 为了保证样式生效，打印部分的样式应该单独写在html文件里面 
以上就是我的两种思路，亲测有效，如果有用就点个赞呗！！！
/* eslint-disable */
const Print = function (dom, options) {
    if (!(this instanceof Print)) return new Print(dom, options);
    this.options = this.extend({
      'noPrint': '.no-print'
    }, options);
    if ((typeof dom) === 
解决打印多页只出现一页问题
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装
下载 print.js
https://github.com/zxc19890923/print/blob/master/print.js
在src目录下面创建plugins/pri