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>