背景

我们希望可以将html页面以pdf导出，可以使用vue-html2pdf插件；

• https://www.npmjs.com/package/vue-html2pdf

效果

运行官网示例代码

代码仓中有个示例代码：https://github.com/kempsteven/vue-html2pdf-demo

克隆项目，运行错误分析

克隆项目到本地，运行npm i，项目报错了。

有的时候我们跑本地项目或者别人的项目时，运行npm i 后，终端会报错，如何看报错内容？

在程序报错的起始位置，看看关键信息，然后网上搜索答案，发现是node版本与node-sass版本兼容问题

https://blog.csdn.net/m0_51943976/article/details/123103046

解决办法

查看示例代码中node-sass用的是4.10几的版本，所以使用nvm管理工具来将node切换成14版本，重新安装依赖就可以成功运行项目了。

示例代码

index.vue

<template>
  <div class="app">
    <el-button type="primary" size="small" @click="exportPDF">导出pdf</el-button>
    <h1>导出PDF进度：{{ progress }}</h1>
    <vue-html2pdf
      :show-layout="controlValue.showLayout"
      :float-layout="controlValue.floatLayout"
      :enable-download="controlValue.enableDownload"
      :preview-modal="controlValue.previewModal"
      :filename="controlValue.filename"
      :paginate-elements-by-height="controlValue.paginateElementsByHeight"
      :pdf-quality="controlValue.pdfQuality"
      :pdf-format="controlValue.pdfFormat"
      :pdf-orientation="controlValue.pdfOrientation"
      :pdf-content-width="controlValue.pdfContentWidth"
      :manual-pagination="controlValue.manualPagination"
      :html-to-pdf-options="htmlToPdfOptions"
      @progress="onProgress($event)"
      @hasDownloaded="hasDownloaded($event)"
      ref="html2Pdf"
    >
      <pdf-content @domRendered="domRendered()" slot="pdf-content" />
    </vue-html2pdf>
  </div>
</template>

<script>
import VueHtml2pdf from "vue-html2pdf";
import PdfContent from "./PdfContent.vue";
export default {
  components: {
    VueHtml2pdf,
    PdfContent,
  },
  data() {
    return {
      controlValue: {
        showLayout: true,
        floatLayout: true,
        enableDownload: true,
        previewModal: false,
        paginateElementsByHeight: 300,
        manualPagination: true,
        filename: "嘻嘻哈",
        pdfQuality: 2,
        pdfFormat: "a4",
        pdfOrientation: "portrait",
        pdfContentWidth: "800px",
      },
      progress: 0,
    };
  },
  computed: {
    htmlToPdfOptions() {
      return {
        margin: 0,

        filename: "嘻嘻哈.pdf",

        image: {
          type: "jpeg",
          quality: 0.98,
        },

        enableLinks: true,

        html2canvas: {
          scale: this.controlValue.pdfQuality,
          useCORS: true,
        },

        jsPDF: {
          unit: "in",
          format: this.controlValue.pdfFormat,
          orientation: this.controlValue.pdfOrientation,
        },
      };
    },
  },
  methods: {
    exportPDF() {
      this.$refs.html2Pdf.generatePdf();
    },
    domRendered() {
      console.log("Dom Has Rendered");
      this.contentRendered = true;
    },
    onProgress(progress) {
      this.progress = progress;
    },
    hasDownloaded(blob) {
      console.log("download-->", blob);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.vue-html2pdf .layout-container {
  top: 30px !important;
}
</style>

PdfContent.vue

<template>
  <div class="pdf-content">
    <h1>测试111</h1>
    <img src="@/assets/imgs/1.png" alt="" />
    <h3 class="html2pdf__page-break">表格信息</h3>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div class="chart-box" ref="chart_box_ref"></div>
    <p class="html2pdf__page-break">系休息嘻嘻</p>
    <p>这里是很多的注释内容，当做一页</p>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart_box_ref);
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "Email",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "Union Ads",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    };
    chart.setOption(option);
  },
};
</script>

<style lang="less" scoped>
.chart-box {
  height: 300px;
}
</style>

使用总结

配置项总结

• 是否显示pdf内容

• 配置项：showLayout。

• 是否下载pdf

• 配置项：enableDownload

• 可以手动配置PDF哪一些内容单独一页

• 配置项：manualPagination。
• 当设置为true后，会根据你传入的pdf内容中带有html2pdf__page-break类的标签进行切割html内容（可以理解为字符串的split）

• 事件

• 这里它会自动转换为blob文件。
• 进度：progress
• 下载：hasDownloaded