vue3 如何将页面生成 pdf 导出

前言

最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,博主采用的是html2Canvas + jspdf。

步骤

1.引入两个依赖

javascript 复制代码
npm i html2canvas
npm i jspdf

2.在utils文件夹下新建html2pdf.ts文件

javascript 复制代码
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'

export const htmlToPDF = async (htmlId: string, title: string = "标题", bgColor = "#fff") => {
  let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElement
  pdfDom.style.padding = '0 10px !important'
  const A4Width = 595.28;
  const A4Height = 841.89;
  let canvas = await html2canvas(pdfDom, {
    scale: 2,
    useCORS: true,
    backgroundColor: bgColor,
  });
  let pageHeight = (canvas.width / A4Width) * A4Height;
  let leftHeight = canvas.height;
  let position = 0;
  let imgWidth = A4Width;
  let imgHeight = (A4Width / canvas.width) * canvas.height;
  /*
     根据自身业务需求  是否在此处键入下方水印代码
    */
  let pageData = canvas.toDataURL("image/jpeg", 1.0);
  let PDF = new jsPDF("p", 'pt', 'a4');
  if (leftHeight < pageHeight) {
    PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= A4Height;
      if (leftHeight > 0) PDF.addPage();
    }
  }
  PDF.save(title + ".pdf");
}

如果你想给pdf加上水印,则添加下面这段代码:

javascript 复制代码
const ctx: any = canvas.getContext('2d');
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate((20 * Math.PI) / 180);
ctx.font = '20px Microsoft Yahei';
ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
for (let i = canvas.width * -1; i < canvas.width; i += 240) {
  for (let j = canvas.height * -1; j < canvas.height; j += 200) {
    // 填充文字,x 间距, y 间距
    ctx.fillText('水印名', i, j);
  }
}

3.在目标页面引入方法即可

javascript 复制代码
<template>
  <div id="test-id">
  <TestPinia></TestPinia>
  </div>
  <button @click="()=>htmlToPDF('test-id','test pdf')">导出</button>
  </template>

  <script lang="ts">
  import { defineComponent, getCurrentInstance } from "vue";

import TestPinia from "./components/TestPinia.vue";
import { htmlToPDF } from '@/utils/html2pdf'

export default defineComponent({
  name: "App",
  components: {
    TestPinia,
  },
  setup() {
    return {
      htmlToPDF,
    }
  },
});
</script>

  <style>
  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

页面

导出的效果图

若有收获,就点个赞吧

相关推荐
不想有bug的小菜鸟4 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
IDRSolutions_CN18 小时前
(教程)PDF 字体技术入门
java·经验分享·pdf·软件工程·团队开发
恶猫1 天前
[特殊字符]清华大学:DeepSeek从入门到精通.pdf(清华领航,驾驭DeepSeek,开启AI新境界)
ai·pdf·deepseek
别拿曾经看以后~2 天前
【PDF预览】使用iframe实现pdf文件预览,加盖章
pdf
自然 醒2 天前
鸿蒙ArkTs如何实现pdf预览功能?
华为·pdf·harmonyos·harmonyosnext版本
Leo.yuan2 天前
48页PDF | GBT 36073-2018 数据管理能力成熟度评估模型 (附下载)
pdf
PythonFun2 天前
1分钟用DeepSeek编写一个PDF转Word软件
pdf·c#·word
William.csj2 天前
Matlab——图像保存导出成好看的.pdf格式文件
matlab·pdf
風落3 天前
PDF无限使用,永久免费!
pdf
d3soft4 天前
厦大团队:DeepSeek大模型概念、技术与应用实践 140页PDF完整版下载
ai·pdf·教程·deepseek