vue,实现打印功能

代码样例

html

    <section id="myPrint" style="display: none">
      <div class="print" ref="myPrint">
        <h1>交易单据</h1>
        <p>订单号:{{printData.orderNo}}</p>
        <p>买家:{{printData.buyerName}} / {{printData.buyerPhone}}</p>
        <p>脚环数量:{{printData.ankleNum}}</p>
        <p>加工数量:{{printData.processNum}}</p>
        <p>脚环费用:{{printData.anklePrice}} 元</p>
        <p>加工费用:{{printData.processPrice}} 元</p>
        <p>总价:{{printData.realPrice}} 元</p>
        <p>下单时间:{{printData.createTime}}</p>
        <p>操作员:{{user.realName}}</p>
        <br>
        <div class="no-print">不要打印我</div>
      </div>
    </section>

方法样例

    posPrint (elementId) {
      setTimeout(() => {
        const el = document.getElementById(elementId)
        const iframe = document.createElement('iframe')
        let doc = null
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-10px;top:-10px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        // 打印的专有CSS样式,根据实际修改
        doc.write('<style> .no-print { display: none} .print h1 { margin: 0px;text-align: center} .print p { margin: 0px;}</style>')
        doc.write(el.innerHTML)
        doc.close()
        // 获取iframe的焦点,从iframe开始打印
        iframe.contentWindow.focus()
        iframe.contentWindow.print()
        if (navigator.userAgent.indexOf('MSIE') > 0) {
          document.body.removeChild(iframe)
        }
      }, 100)
    }

使用传入dom的Id

this.posPrint('myPrint')

在这里插入图片描述

### 如何在 Vue实现网页打印功能 #### 插件简介 `vue-print-nb` 是一款专为 Vue.js 设计的轻量级插件,能够帮助开发者快速实现网页打印功能。该插件支持多种高级特性,例如指定区域打印、样式自定义以及生成 PDF 文件等功能[^2]。 --- #### 安装 `vue-print-nb` 要使用此插件,首先需要通过 npm 或 yarn 进行安装: ```bash npm install vue-print-nb --save ``` 或者 ```bash yarn add vue-print-nb ``` 完成安装后即可引入并注册到项目中[^1]。 --- #### 基本使用示例 以下是基于 `vue-print-nb` 的简单示例代码,展示如何在一个 Vue 组件中实现打印功能: ```html <template> <div> <!-- 需要打印的内容 --> <div id="print-content"> <h1>这是需要打印的部分</h1> <p>你可以在这里放置任何 HTML 元素。</p> </div> <!-- 打印按钮 --> <button @click="handlePrint">点击打印</button> </div> </template> <script> import Print from 'vue-print-nb'; export default { methods: { handlePrint() { this.$print('#print-content'); // 调用插件方法传入目标 DOM ID } }, created() { this.$print = new Print(); // 初始化插件实例 } }; </script> ``` 上述代码展示了如何绑定一个按钮事件来触发打印操作,并指定了具体的打印内容区域。 --- #### 自定义样式 如果希望对打印内容应用特殊的 CSS 样式,则可以通过以下方式设置全局或局部样式规则: ```css @media print { body * { visibility: hidden; /* 默认隐藏所有元素 */ } #print-content, #print-content * { visibility: visible; /* 显示需要打印的目标及其子节点 */ } #print-content { position: absolute; top: 0; left: 0; } } ``` 以上样式的目的是仅显示被标记为目标打印区 (`#print-content`) 的部分,而忽略其他无关内容[^3]。 --- #### 功能扩展:PDF 导出与缩放控制 除了基础的打印功能外,还可以利用插件内置的能力进一步增强用户体验,比如提供 PDF 下载选项或加入缩放调节按钮。具体实现如下所示: ##### 添加缩放控件 ```html <div> <input type="range" min="50" max="200" v-model="scaleValue" /> 当前比例:{{ scaleValue }}% </div> <button @click="generatePdf()">导出为 PDF</button> ``` ##### JavaScript 方法补充 ```javascript methods: { generatePdf() { const opt = { margin: 1, filename: 'document.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: parseInt(this.scaleValue / 100) }, // 使用滑动条动态调整分辨率 jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; this.$print(opt); // 将配置传递给插件执行 PDF 输出逻辑 } }, data() { return { scaleValue: 100 // 初始默认值设为 100%,即无缩放状态 }; } ``` 此处实现了让用户自行设定文档大小的功能,同时兼顾了高质量图像渲染的需求。 --- #### 总结 借助于 `vue-print-nb` 插件的强大能力,在 Vue 应用程序里集成高效的打印解决方案变得非常简便快捷。无论是简单的静态页面还是复杂的交互场景都能得到良好支持。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值