html5 - vue3+ts+element plus开发的web项目，前端导出打印插件/功能实现推荐？

Question

vue3+ts+element plus开发的web项目，想针对客户的table查询结果导出打印需求，实现前端打印功能，请问有什么比较好的插件或者实现代码思路推荐嘛？

之前.net mvc开发的web项目，报表是使用rdlc插件来实现的。现在这种前后端分离，纯vue开发的前端有无好的实现插件或者思路呢。

Answer 1

不考虑表格分页可以使用：vue-print-nb,在线DEMO，

常规就是生成图片后然后转pdf打印：截图可以使用插件html2canvas，dom-to-image

html2canvas截图

import html2canvas from "html2canvas";const dom = document.getElementById("");html2canvas(dom, {  width: '', //宽度  height: '', //高度  backgroundColor: "#fff", //背景色，设置null为透明  allowTaint: false, //是否允许跨域图片  useCORS: true, //是否尝试使用CORS从服务器加载图像  scale: 2, //渲染的比例，默认为浏览器设备像素比例  logging: false //启用日志进行调试  foreignObjectrendering: false, //如果浏览器支持，使用ForeignObject渲染} as any).then((canvas) => {  let base64 = canvas.toDataURL("image/png");  console.log("====base64===", base64);});

dom-to-image截图

var node = document.getElementById("my-node");domtoimage  .toPng(node)  .then(function (dataUrl) {    var img = new Image();    img.src = dataUrl;    document.body.appendChild(img);  })  .catch(function (error) {    console.error("oops, something went wrong!", error);  });

jsdpf生成pdf

// 创建一个新的 jsPDF 实例var doc = new jsPDF();var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....';doc.setFontSize(40);doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);doc.text(30, 20, 'Hello world!');doc.save('example.pdf');

分页可以考虑使用, puppeteer写一个导出脚本，一个简单的Node.js应用，参考案例:Puppeteer截图demo

或者可以使用前后对结合:使用wkhtmltopdf

方案很多，总有适合你的

A4纸的尺寸的图像的像素是794x1123

Answer 2

基于 html2canvas 和 jspdf 的前端 pdf 打印下载方案(代码解析)

Answer 3

在Vue3+TypeScript+Element Plus的项目中，实现前端导出打印功能，你可以考虑使用以下几个插件或方法：

1. vue-print-nb

vue-print-nb是一个基于Vue的前端打印插件，支持Vue3和TypeScript。它使用简单，并且可以与Element Plus很好地配合使用。你可以通过安装和引入该插件，然后在需要打印的组件中使用相应的指令来实现打印功能。

安装命令：

npm install vue-print-nb

使用示例：

<template>  <div>    <el-table :data="tableData">      <!-- 表格内容 -->    </el-table>    <button v-print="'#print-area'">打印</button>  </div></template><script lang="ts">import { defineComponent } from 'vue';import VuePrintNB from 'vue-print-nb';export default defineComponent({  components: {    VuePrintNB,  },  data() {    return {      tableData: [/* 数据内容 */],    };  },});</script><style scoped>#print-area {  /* 打印区域样式 */}</style>

2. jsPDF + html2canvas

jsPDF是一个用于生成PDF文件的JavaScript库，而html2canvas可以将HTML元素转换为Canvas，从而可以进一步转换为图片或PDF。你可以结合这两个库来实现将表格数据导出为PDF并打印的功能。

安装命令：

npm install jspdf html2canvas

使用示例：

<template>  <div>    <el-table :data="tableData" ref="printTable">      <!-- 表格内容 -->    </el-table>    <button @click="exportToPdf">导出PDF</button>  </div></template><script lang="ts">import { defineComponent, ref } from 'vue';import jsPDF from 'jspdf';import html2canvas from 'html2canvas';export default defineComponent({  setup() {    const tableData = ref([/* 数据内容 */]);    const printTable = ref(null);    const exportToPdf = async () => {      const element = printTable.value.$el as HTMLElement;      const canvas = await html2canvas(element);      const imgData = canvas.toDataURL('image/png');      const pdf = new jsPDF();      const imgProps = pdf.getImageProperties(imgData);      const pdfWidth = pdf.internal.pageSize.getWidth();      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);      pdf.save('table.pdf');    };    return {      tableData,      printTable,      exportToPdf,    };  },});</script>

3. 使用浏览器默认打印功能

你也可以选择使用浏览器的默认打印功能来实现打印需求。这种方法不需要额外的插件，但可能需要你手动处理一些样式和布局问题。

示例代码：

<template>  <div>    <el-table :data="tableData">      <!-- 表格内容 -->    </el-table>    <button @click="window.print()">打印</button>  </div></template><script lang="ts">import { defineComponent } from 'vue';export default defineComponent({  data() {    return {      tableData: [/* 数据内容 */],    };  },});</script>

以上三种方法都可以实现Vue3+TypeScript+Element Plus项目中的前端导出打印功能。你可以根据自己的需求和项目的实际情况选择最适合的方法。