Vue3导出pdf文件，这2个插件可真好用！

写在前边

文末有我在前端面试多年的经验文章！！！

1.前言

vue 项目中要将 html 页面导出 pdf 文件，最常用的就是 html2canvas 和 jspdf 库。

html2canvas 是一个 JavaScript 库，它允许你使用 JavaScript 捕获网页的屏幕截图。

也就是说首先你需要用选择器划分出要导出 pdf 文件的 html 范围。

html2canvas 会根据指定的 html 范围构建 DOM 树，然后使用 Canvas 渲染所有的元素，接着将渲染后的元素组合成一个单一的 Canvas 图像。

最后再用 jspdf 库生成 pdf 文件。

2.安装配置插件

npm i html2canvas --save
npm i jspdf --save

3.封装导出 pdf 文件的工具类

• 1.构建 DOM 树
• 2.Canvas 渲染图像
• 3.jsPDF 导出 pdf 文件

该工具类需要传两个参数：1.pdf文件名。2.选择器id

// 页面导出为pdf格式
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";

const htmlToPdf = {
  getPdf(title, id) {
    // 1. 构建 DOM 树
    const pdfContent = document.querySelector(id);
    pdfContent.ownerDocument.defaultView.innerHeight = 1000;
    pdfContent.ownerDocument.defaultView.innerWidth = 1000;
    // 2. Canvas 渲染图像
    html2Canvas(pdfContent, {
      logging: false,
      useCORS: true,
      scale: 2,//按比例增加分辨率
    }).then((canvas) => {
     // 3. jsPDF 导出 pdf文件
      const imgData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF("p", "mm", "a4");
      const a4w = 190;
      const a4h = 277;
      pdf.addImage(
        imgData,
        "JPEG",
        10,
        10,
        a4w,
        Math.min(a4h, (a4w * canvas.height) / canvas.width)
      );
      pdf.save(title + ".pdf");
    });
  },
};
export default htmlToPdf;

4. 综合案例

4.1 设置 id 选择器

 <div id="printData">
  <el-table border :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" width="180" label="Address" />
  </el-table>
</div>

4.2 调用工具类

<el-button @click="downloadPDF()" type="success">下载Pdf</el-button>
  
// 下载PDF方法
const downloadPDF = () => {
  htmlToPdf.getPdf(`知否技术`, "#printData");
};

4.3 完整代码

<template>
  <div>
    <el-card>
      <template #header>
        <el-button @click="downloadPDF()" type="success">下载Pdf</el-button>
      </template>
      <div id="printData">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" width="180" label="Address" />
        </el-table></div
    ></el-card>
  </div>
</template>
<script setup>
import htmlToPdf from "./utils/htmlToPDF";
const tableData = [
  {
    date: "2024-05-03",
    name: "知否君",
    address: "中国北京",
  },
  {
    date: "2024-05-02",
    name: "工藤新一",
    address: "中国上海",
  },
];
// 下载PDF
const downloadPDF = () => {
  htmlToPdf.getPdf(`知否技术`, "#printData");
};
</script>
<style scoped></style>

接下来给大家推荐一篇我在前端面试多年的经验文章，希望大家看完以后都可以领取到心仪的offer哦!

文章：《聊聊前端面试那些事儿》