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

Only_You

21914278

发布于
4 月 3 日安徽

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

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

typescript

html5

chrome c#

阅读 2.4k

AI BotBETA

在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项目中的前端导出打印功能。你可以根据自己的需求和项目的实际情况选择最适合的方法。

2 个回答

得票最新

zcf0508

669129

发布于
4 月 3 日湖北

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

along

1.7k321

发布于
4 月 3 日安徽

更新于
4 月 3 日

不考虑表格分页可以使用：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

查看全部 2 个回答

推荐问题

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

1. vue-print-nb

2. jsPDF + html2canvas

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

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

微信小程序支付成功后续的业务逻辑怎么处理？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

chrome版本号：129.0.6668.71（正式版本）+vite5+vue3+ant-desgin-vue 打包之后发布到服务器上之后白屏？

Microsoft