vue.js - 在Vue中将隐藏的div转换为pdf

Question

经过几个小时的研究，我发现了一些将div内容导出到pdf的方法，包括所有样式。根据this页面，vue-html2pdf无法正常工作，因此我使用了html2pdf。它需要一个带有ref的div并将其转换为pdf，同时下载:

<div ref="printable">Hello</div>
<button @click="export()">Export to PDF</button

export() {
    html2pdf(this.$refs.document, {
        margin: 1,
        filename: 'document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { dpi: 192, letterRendering: true },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
    })
},

问题是它包含所有样式，并且我无法导出隐藏的div。有没有适当的方法来实现这一目标？

Answer 1

您可以为隐藏的元素设置ref，并在生成pdf之前删除隐藏的属性，并在调用生成的函数后立即重新设置它。在这里，我编辑sandbox。您可以在pdf中看到标题，该标题隐藏在page中。

<template>
      <div id="app" ref="document">
        <img width="200" src="./assets/logo.png">
        <router-view></router-view>
        <h1 ref="hide" hidden>This is shown in pdf</h1>
        <button @click="exportToPDF">Export to PDF</button>
      </div>
    </template>

<script>
  import html2pdf from "html2pdf.js";

  export default {
    name: "app",
    methods: {
      exportToPDF() {
        let data = Object.assign({}, this.$refs);
        data.hide.removeAttribute("hidden");
        html2pdf(data.document, {
          margin: 1,
          filename: "document.pdf",
          image: {
            type: "jpeg",
            quality: 0.98
          },
          html2canvas: {
            dpi: 192,
            letterRendering: true
          },
          jsPDF: {
            unit: "in",
            format: "letter",
            orientation: "landscape"
          }
        });
        data.hide.setAttribute("hidden", "hidden");
      }
    }
  };
</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>