vue局部打印多页面pdf

已于 2023-08-16 17:52:42 修改
阅读量1.2k 收藏
点赞数
文章标签： vue.js pdf javascript
于 2023-08-16 17:52:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/132324563
版权
文章介绍了四种在Vue.js应用中将HTML内容转换为PDF并进行打印的方法，包括使用window.print()、替换页面、处理表单元素和样式、以及封装成可复用的打印类。每种方法都有其优缺点，如支持多页打印和页面刷新问题等。
摘要由CSDN通过智能技术生成

技术背景

  1. html打印程pdf,使用的官方提供的window.print()
  2. 打印的样式 @media print {}

方法一

            const printContent = this.$refs.bodyright;
            var textInput = printContent.getElementsByTagName("input");
            for (var i = 0; i < textInput.length; i++) {
                textInput[i].setAttribute("value", textInput[i].value)
            }
             var textTextarea = printContent.getElementsByTagName("textarea");
            for (var i = 0; i < textTextarea.length; i++) {
                textTextarea[i].innerHTML = textTextarea[i].value
            }
             // 创建一个隐藏的iframe
            const iframe = document.createElement('div');
            document.body.appendChild(iframe);
            iframe.innerHTML = printContent.innerHTML
            iframe.setAttribute('style', 'position: fixed;left:0;top:0;width:100%;height:100vh;z-index:9999;background:#fff');
             window.print();
            document.body.removeChild(iframe);
           
  }

缺点: 只能打一个页面
有点:不会刷新

方法二

  printContent{
   const printContent = this.$refs.bodyright;
   document.body.innerHTML=printContent.innerHTML;
      // 执行打印操作
      window.print();
      // 重新加载样式
      window.location.reload();
        }

缺点: 替换时页面会刷新,保存不了状态
有点:可以打印多页面

方法三

  printContent{
       let str = [], s = [];
            const printContent = this.$refs.bodyright;

            var textInput = printContent.getElementsByTagName("input");
            for (var i = 0; i < textInput.length; i++) {
                textInput[i].setAttribute("value", textInput[i].value)
            }
            var textTextarea = printContent.getElementsByTagName("textarea");
            for (var i = 0; i < textTextarea.length; i++) {
                textTextarea[i].innerHTML = textTextarea[i].value
            }
            var textCheckbox = printContent.getElementsByTagName("checkbox");
            for (var i = 0; i < textCheckbox .length; i++) {
             if(textCheckbox [i].checked){
                textCheckbox [i].checked= textCheckbox [i].checked
                }
                
            }
              var textRadio = printContent.getElementsByTagName("radio");
            for (var i = 0; i < textRadio.length; i++) {
                if(textRadio[i].checked){
                textRadio[i].checked= textRadio[i].checked
                }
                
            }
            
            let sheets = document.styleSheets;
            for (let i = 0; i < sheets.length; i++) {
                let ruleList = sheets[i].cssRules;
                for (let j = 0; j < ruleList.length; j++) {
                   s.push(ruleList[j].cssText)
                }
            }
             // ${s.join(' ')}
            console.log(s.join(' '), '=====>')


            const iframe = document.createElement('iframe');
             iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const printDocument = iframe.contentWindow.document;
             printDocument.open();
             printDocument.write('<html><head><title>局部打印</title>');
             printDocument.write(`<style>@media print { body { visibility: hidden; } .print-content { visibility: visible; } ${s.join(' ')} }</style>`);
             printDocument.write('</head><body>');
             printDocument.write('<div class="print-content">');
             printDocument.write(printContent.innerHTML);
             printDocument.write('</div>');
             printDocument.write('</body></html>');
             printDocument.close();
            // 等待iframe内容加载完成后再执行打印
             iframe.onload = function () {
                 iframe.contentWindow.print();
                 document.body.removeChild(iframe);
             };
        }

缺点: 安排多余的页面
有点:可以打印多页面

方法四

全选复制 另存为print.js

 // 打印类属性、方法定义
/* 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) === "string") {
      this.dom = document.querySelector(dom);
    } else {
      this.isDOM(dom)
      this.dom = this.isDOM(dom) ? dom : dom.$el;
    }
   
    this.init();
  };
  Print.prototype = {
    init: function () {
      var content = this.getStyle() + this.getHtml();
      this.writeIframe(content);
    },
    extend: function (obj, obj2) {
      for (var k in obj2) {
        obj[k] = obj2[k];
      }
      return obj;
    },
   
    getStyle: function () {
      var str = "",
        styles = document.querySelectorAll('style,link');
      for (var i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML;
      }
      str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
      str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
      return str;
    },
   
    getHtml: function () {
      var inputs = document.querySelectorAll('input');
      var textareas = document.querySelectorAll('textarea');
      var selects = document.querySelectorAll('select');
   
      for (var k = 0; k < inputs.length; k++) {
        if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
          if (inputs[k].checked == true) {
            inputs[k].setAttribute('checked', "checked")
          } else {
            inputs[k].removeAttribute('checked')
          }
        } else if (inputs[k].type == "text") {
          inputs[k].setAttribute('value', inputs[k].value)
        } else {
          inputs[k].setAttribute('value', inputs[k].value)
        }
      }
   
      for (var k2 = 0; k2 < textareas.length; k2++) {
        if (textareas[k2].type == 'textarea') {
          textareas[k2].innerHTML = textareas[k2].value
        }
      }
   
      for (var k3 = 0; k3 < selects.length; k3++) {
        if (selects[k3].type == 'select-one') {
          var child = selects[k3].children;
          for (var i in child) {
            if (child[i].tagName == 'OPTION') {
              if (child[i].selected == true) {
                child[i].setAttribute('selected', "selected")
              } else {
                child[i].removeAttribute('selected')
              }
            }
          }
        }
      }
   
      return this.dom.outerHTML;
    },
   
    writeIframe: function (content) {
      var w, doc, iframe = document.createElement('iframe'),
        f = document.body.appendChild(iframe);
      iframe.id = "myIframe";
      //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
      iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
      w = f.contentWindow || f.contentDocument;
      doc = f.contentDocument || f.contentWindow.document;
      doc.open();
      doc.write(content);
      doc.close();
      var _this = this
      iframe.onload = function(){
        _this.toPrint(w);
        setTimeout(function () {
          document.body.removeChild(iframe)
        }, 100)
      }
    },
   
    toPrint: function (frameWindow) {
      try {
        setTimeout(function () {
          frameWindow.focus();
          try {
            if (!frameWindow.document.execCommand('print', false, null)) {
              frameWindow.print();
            }
          } catch (e) {
            frameWindow.print();
          }
          frameWindow.close();
        }, 10);
      } catch (err) {
        console.log('err', err);
      }
    },
    isDOM: (typeof HTMLElement === 'object') ?
      function (obj) {
        return obj instanceof HTMLElement;
      } :
      function (obj) {
        return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
      }
  };
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 4. 添加实例方法
    Vue.prototype.$print = Print
  }
  export default MyPlugin

main.js内挂载（注意引入路径是你刚刚保存的地址）

import print from '@/utils/print.js'
Vue.use(print);

二、使用
在你要打印的元素上 写上ref=“print”

    <div class="box" ref="print">
                    ...
    </div>
    <el-button type="primary" @click="print">打 印</el-button>

methods

  methods:{
    print(){
      this.$print(this.$refs.print); // 使用
    }
  }

另外不需要打印的元素加上 no-print类名 即可不打印

   <div class="no-print">不要打印我</div>

参考:https://blog.csdn.net/m0_60067716/article/details/121338755

web修理工
关注
vue3 - 实现将当前页面作为pdf进行导出效果功能，把整个页面导出为pdf文件并点击自动下载，支持vue3前端页面局部转pdf及打印加分页防止内容截断（超详细示例源码，一键复制开箱即用）
高级前端工程师
07-23 6218
vue3 pdf，vue3导出pdf，vue3把整个页面导出为pdf，vue3如何将页面生成pdf导出，vue3局部页面转PDF文件，vue3怎么用jspdf仅将页面的部分转为pdf，vue3 jspdf防截断处理教程，vue3将页面进行打印插件组件，vue3 当前页面导出pdf，vue3 如何将页面生成 pdf 导出，vue3 页面导出为pdf，vue3.x网页导出pdf，vue3局部页面导出pdf，vue3项目把某个div盒子或当前页面生成pdf文件并下载，vue3将页面作为pdf进行导出，vue3如何
vue中使用vue-print.js实现多页打印
10-15
主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue print.js pdf文件批量打印
qq_22689825的博客
09-06 620
vue 批量打印pdf
Vue前端实现预览并打印PDF文档
最新发布
hero8011的博客
09-13 1297
Vue前端实现预览并打印PDF文档
打印并实现分页
qq_42882723的博客
07-21 778
print.js // 打印类属性、方法定义 /* 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) ===
vue实现打印功能（可多页打印）
weixin_52473844的博客
11-13 1777
当我们使用插件时，发现只能打印一张，很难受，现在封装了一个可以多页打印的工具类，简单方便，话不多说，直接上代码。
vue实现打印多页
xioxi
03-18 2637
1.安装打印插件vue-print-nb 安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.use(Print); 2.页面使用 <div id="print"> <div class="page_items" style="width:100%;min-height:1020px;page-break-after: always;"> 页面一 <pag
手把手教你 vue-cli 单页到多页应用
weixin_34138377的博客
07-18 235
vue-cli到多页应用 前言：我有一个cli创建的vue项目，但是我想做成多页应用，怎么办，废话不多说，直接开撸~ 约定：新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间，很多东西都写在注释里 第一步：cli一个vue项目 新建一个vue项目 官网 vue init webpack demo cli默认使用we...
Vue打印数据库内全部数据(多页数据)
fengzhiqi1993的博客
09-23 1366
将数据库内的全部数据以表格的形式进行打印，需要调用后台接口直接从数据库内进行数据的查找，而不是直接在页面内获取数据。 1.安装 print-js npm install print-js --save 2.页面引入 // 在当前vue文件内引用 import printJS from ‘print-js’ 3.使用 <el-button @click="printJson">打印全部表格</el-button> methods: function printJson() {.
Vue实现PDF导出和打印功能
热门推荐
123
01-13 1万+
在Vue页面上实现PDF导出和打印功能依赖于两个npm插件，分别为vue-to-pdf和vue-easy-printer。 安装命令： npm i vue-to-pdf --save npm i vue-easy-printer --save 在main.js/App.js中加入引用： import vueToPdf from 'vue-to-pdf'; import VueEasy...
前端vue项目，把某个div盒子或当前页面生成pdf文件并下载。
2401_84091544的博客
04-22 740
点击这里即可免费获取，包括答案解析。点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-JhlhiZlX-1713716389686)]
vue中将网页打印成pdf实例代码
08-30
本篇文章主要介绍了vue中将网页打印成pdf实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 前端导出PDF文件学起来
weixin_47382137的博客
10-25 507
111
Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚
林中明月间丶
01-05 2914
需求：网页已经写成了pdf的样式，需要点击导出pdf按钮 调用浏览器系统预览-打印。,覆盖外面原有的样式,以去除一些打印时不需要的而原HTML中有的样式。在我们想打印内容的标签上添加id，如下。在想要引入的页面中添加如下代码。
Vue项目实现在线预览pdf，并且可以批量打印pdf的两种方法
qq_37635012的博客
07-18 6017
同时在样式里设置如下打印样式，也是为了控制不多印空白页的问题。2.预览页面里，有个吸顶效果，然后这个pdf后端返回给我的是一个地址，我们预览pdf用到的插件是vue-office-pdf，由于有多个pdf，所以需要遍历，你会看到v-for=“pdf in pdfsArray”。这里需要注意的是，我们在打印时需要取消默认的页眉页脚的勾，然后将边距改为无，这样就能保证打印的页面无页眉页脚且是居中显示内容的了，目标打印机选择好，点击"打印"就能打了。
vue 实现打印与批量分页打印功能
weixin_47092531的博客
07-18 5245
vue 实现打印与批量分页打印功能
vue页面打印pdf(可预览)
weixin_52923266的博客
02-11 1876
把前端页面打印成pdf文件下载到本地,咱们来看一下步骤。
vue 页面打印到PDF
04-05
你可以使用 jsPDF 库来将 Vue 页面打印到 PDF。 以下是一个基本的示例： 1. 安装 jsPDF ``` npm install jspdf --save ``` 2. 在 Vue 组件中引入 jsPDF 并创建一个打印函数 ``` import jsPDF from "jspdf"; export default { methods: { printPage() { const pdf = new jsPDF(); pdf.html(document.querySelector("#printable"), { callback: function () { pdf.save("print.pdf"); }, }); }, }, }; ``` 3. 在 Vue 模板中添加一个按钮，以触发打印函数 ``` <template> <div> <!-- 其他页面内容 --> <div id="printable"> <!-- 只需要打印此元素的内容 --> <h1>Hello, world!</h1> <p>This is a printable page.</p> </div> <button @click="printPage">Print to PDF</button> </div> </template> ``` 以上代码将在点击按钮时将 id 为 "printable" 的元素打印到 PDF 并将其保存在本地计算机上。你可以根据需求进一步调整代码，例如添加更多页面元素、自定义 PDF 文件名等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值