在Vue.js中将div组件转换为pdf的问题

问题描述

我想将vuejs中的div组件转换为pdf。 Pdf已下载，但有时显示空白屏幕。有时它显示正确的输出，但是当我在div组件中进行更改时，它再次显示空白屏幕。 另外，我希望d在UI中显示此div组件。我只想以pdf格式显示。如何隐藏屏幕上的组件并仅在pdf上显示？ 我的代码是：

<script>
import moment from "moment";
import domtoimage from 'dom-to-image';
import html2pdf from 'html2pdf.js';
import jspdf from 'jspdf';
export default {
  data() {
    return{
      total: null,address: null,length: null,currentDate: null
    };
  },props:['order','showInvoice'],filters: {
    formatDate: function(value) {
      return moment(value).format("DD MMMM YYYY");
    },},async mounted() {
    this.total = 0;
    console.log(this.order);
    for(let i=0;i<this.order.items.length;i++)
    {
      this.total += (this.order.items[i].qty * this.order.items[i].price);
    }
    this.length = this.order.items.length;
    this.currentDate = new Date().toLocaleString();
    this.address = this.order.deliveryAddress.address.houseNumber + ',' +
                    this.order.deliveryAddress.address.street1 + ',' +
                    this.order.deliveryAddress.address.street2 + ',' +
                    this.order.deliveryAddress.address.city + ',' +
                    this.order.deliveryAddress.address.zip + ',' +
                    this.order.deliveryAddress.address.state + ',' +
                    this.order.deliveryAddress.address.country + ',';
    let element = document.getElementById('invoice');
    let options = this.setoptions();
    /*let worker = html2pdf().set(options).from(element).toPdf();
    worker.save();*/
    let html2PdfSetup = html2pdf().set(options).from(element);
    let pdfBlobUrl = await html2PdfSetup.save().output('bloburl');
  },methods:{
    setoptions () {
      return {
        margin: [0,0],filename: "Invoice.pdf",html2canvas: {
          scale: 4,dpi: 192,letterRendering: true,ignoreElements: e => {
            return e.classList.contains("cke_pagebreak") || e.classList.contains("html2pdf__page-break") ? true : false;
          }
        },jsPDF: {
          unit: "pt",format: "A4",orientation: "portrait",putOnlyUsedFonts: true,pagesplit: true,pagebreak: {mode: ["avoid-all"],after: ".cke_pagebreak"}
      }
        }
  }
}
</script>

<template>
  <div id="invoice" class="invoice-Box" v-if="showInvoice == true">
    <div class="invoice overflow-auto">
      <div style="min-width: 600px">
        <header>
          <h2>Tax Invoice/Bill of Supply</h2>
        </header>
        <main>
          <div class="row contacts">
            <div class="col invoice-to">
              <h3 style="color:black;">BILL TO:</h3>
              <div style="font-size:16px"><h4>{{address}}</h4></div>
            </div>
            <div class="col invoice-details">
              <h1 class="invoice-id">INVOICE {{order.orderId}}</h1>
              <div class="date">Order Date: {{order.createdAt | formatDate}}</div>
              <div class="date">Invoice Date: {{currentDate | formatDate}}</div>
            </div>
          </div>
          <table border="0" cellspacing="0" cellpadding="0">
            <thead>
              <tr>
                <th>Sr.No.</th>
                <th class="text-left">ITEM</th>
                <th class="text-right">PRICE</th>
                <th class="text-right">Quantity</th>
                <th class="text-right">TOTAL</th>
              </tr>
            </thead>
            <tbody>
              <template v-for="(item,index) in order.items">
                <tr :key="index">
                  <td class="no">{{index + 1}}</td>
                  <td class="text-left"><h3>{{item.name}}</h3></td>
                  <td class="unit">${{item.price}}</td>
                  <td class="qty">{{item.qty}}</td>
                  <td class="total">${{item.price * item.qty}}</td>
                </tr>
              </template>
            </tbody> 
            <tfoot>
              <tr>
                <td colspan="2"></td>
                <td colspan="2">GRAND TOTAL</td>
                <td>${{total}}</td>
              </tr>
            </tfoot>
          </table>
        </main>
      </div>
    </div>
  </div>
</template>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）