问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Only_You
    21914278

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

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

    Microsofttypescripthtml5chromec#
    阅读 2.4k
    avatarAI 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
      头像
      along
        1.7k321

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        logo
        Microsoft
        子站问答
        访问
        宣传栏