当前位置: 首页 > news >正文

VUE---打印功能

在开发系统的时候,经常会需要将系统里面的报表进行打印,主要是要实现局部打印的功能:

插件:

npm install vue-print-nb --save

具体示例代码:

<template><div><button v-print="'#printArea'">打印</button><div id="printArea">需要打印的内容</div></div>
</template><script>
import Print from 'vue-print-nb';
export default {directives: { Print }
}
</script>

配置项:可通过 printConfig 对象设置打印参数(如页眉页脚、边距等)。

其他方法:

1、使用 jsPDF + html2canvas 生成 PDF 打印

适合需要精确控制打印内容(如复杂图表、自定义布局)的场景。

实现逻辑:
将 DOM 元素转换为 Canvas;
使用 jsPDF 将 Canvas 导出为 PDF;
触发打印或下载。

具体:

<script>
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';export default {methods: {async generatePDF() {const element = this.$refs.printArea;const canvas = await html2canvas(element);const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF('p', 'mm', 'a4');const imgWidth = 210; // A4 宽度const imgHeight = (canvas.height * imgWidth) / canvas.width;pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);pdf.save('print.pdf'); // 保存或触发打印
    }}
}
</script>

打完收工!

http://www.hskmm.com/?act=detail&tid=35838

相关文章:

  • 洒水清洁,音乐相伴,洒水车声音-兰花草音乐芯片详细资料
  • JavaScript 开发代码规范指南
  • 2025 年深圳餐饮设计公司最新推荐排行榜: IP 化设计机构口碑甄选,助力餐饮品牌破局同质化竞争
  • [ACTF2020 新生赛]Include 1 文件包含
  • 编程语言变量的引用共享问题
  • 分析一下url的格式和windows与Linux共享文件的格式
  • 2025 年通风天窗源头厂家最新推荐:品牌定制能力、售后体系及综合实力深度测评榜单
  • 2025年唐卡装饰权威深度解析:家装行业新格局与品质承诺
  • 简略描述 MySQL 的备份及还原
  • 血战上海滩下载与安装教程(Win10/Win11完美运行版)
  • Linux中Expect脚本和Shell的脚本核心特点解析、以及比对分析和应用场景
  • 2025 长沙美食餐厅最新推荐排行榜:红记领衔老字号与新势力,湘味品质之选全解析
  • 2025年大连甘井子区优质养老机构推荐:从社区到自然的暖心之选
  • 2025 MIM 加工优质厂家推荐榜:精密零部件/金属件/金属零件/金属/金属成型MIM 加工厂家,聚焦精密制造的实力派之选
  • 2025年AI营销公司推荐:广东AI营销公司/广州AI营销公司如何以模块化服务破解企业增长困局
  • scanner
  • 2025年越南货架厂家推荐榜:立体/高位/仓储/托盘/重型/流利式/贯通式/穿梭车/模具/货架厂家,多维度解析行业实力派
  • 2025年主轴维修厂家企业推荐: 电/高速/精密/磨床/进口磨床/加工中心电/数控机床/高速电主轴维修厂家,服务商助力制造企业降本增效
  • 2025年磨床电主轴先升级推荐榜:国产/进口/内圆/外圆/无心/平面/来图定制磨床电主轴厂家,聚焦精密制造核心
  • 在写left join的时候 是大表在左侧 还是小表在左侧(二)
  • 在写left join的时候 是大表在左侧 还是小表在左侧(一)
  • 2025年变电站厂家最新推荐榜发布:聚焦高效电力解决方案,陕西四方华能电气设备有限公司领跑行业
  • 高级语言程序设计课程第二次个人作业
  • 2025精密球轴承实力厂家推荐,无锡雨露精工专注半导体设备轴承定制
  • 微信小程序域名查询系统详细介绍
  • 2025 年地铺石厂家最新推荐榜:涵盖生态/仿石/陶瓷等品类,揭秘行业口碑优质企业18厚/火烧/庭院/陶瓷地铺石厂家推荐
  • TLS1.2 和 TLS1.3的简要区别
  • [极客大挑战 2019]Havefun 1 代码审计
  • oracle查询某一天的数据,即日期条件使用
  • 2025粘度计厂家权威推荐:华宇忠宜在线旋转振动多场景精准测量