如何在nuxt js项目中将html组件转换为pdf打印- doc.fromHTML的真实用法

Question

在我的nuxt项目中，ı想要将我的html组件转换为pdf。当点击按钮ı想要转换所有颜色的成分为pdf。

import {jsPDF} from 'jspdf'
 
export default {
 
    data() {
        return {
             margins : {  top: 80,   bottom: 60, left: 40,  width: 522  }  }
    },
    methods: {
        generatePdf() {
            const doc = new jsPDF('p', 'pt', 'A4'); 
            doc.fromHTML(this.$refs.testHtml, this.margins.left, this.margins.top,{
                'width' : this.margins.width
            });
            doc.save('test.pdf');
        }
    }

}

在这里，问题与doc.fromHTML有关。在许多项目中，这种方式是有效的，但在nuxt中，doc.fromHTML不起作用。它会给出错误。

Answer 1

我来晚了，但是有人可以用这个解决方案。

使用此方法：

​

 printReport() {
     window.print();
  },

<button onClick="printReport">Print !</button>

​

如果你想在打印时隐藏一些东西，可以在CSS中使用。

​

 @media print {
     .no-printme {
    display: none !important;
  }
  .printme {
    display: block;
  }
}

​

Answer 2

使用vue-html2pdf npm包这将解决您的问题，并且在内部使用jspdf，因此您将获得其配置。

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

Answer 3

vue-html2pdf npm模块无法正常工作。而不是尝试使用html2pdf模块在vuejs中将html转换为pdf。

套餐链接：https://www.npmjs.com/package/html2pdf.js/v/0.9.1