vuehtml2pdf的使用

Package Github:

https://github.com/kempsteven/vue-html2pdf
请查看演示站点和演示github以更容易地理解包的使用。

Demo Site:

https://vue-html2pdf-demo.netlify.com

Demo Github:

https://github.com/kempsteven/vue-html2pdf-demo

1、vue-html2pdf

原文：vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is basically a vue wrapper only and uses html2pdf.js behind the scenes.
翻译：vue-html2pdf将任何vue组件或元素转换为PDF, vue-html2pdf基本上只是一个vue包装器，并在幕后使用html2pdf.js。

2、Getting started（开始）

npm

原文：Install vue-html2pdf and its dependencies using NPM with npm i vue-html2pdf
翻译：使用NPM指令 npm i vue-html2pdf 安装vue-html2pdf及其依赖项

3、Usage（使用）

（1）引入：

import VueHtml2pdf from 'vue-html2pdf'

export default {
    methods: {
        /*
            Generate Report using refs and calling the
            refs function generatePdf()
        */
        generateReport () {
            this.$refs.html2Pdf.generatePdf()
        }
    },

    components: {
        VueHtml2pdf
    }
}

（2）在 template 中使用：

<template>
   <div>
     <vue-html2pdf
     	:show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="hee hee"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"
        @progress="onProgress($event)"
        @hasStartedGeneration="hasStartedGeneration()"
        @hasGenerated="hasGenerated($event)"
        ref="html2Pdf"
    >
        <section slot="pdf-content">
        <!-- PDF Content Here -->
        </section>
    </vue-html2pdf>
   </div>
</template>

4、Props（属性）

原文：This props can seen in the Usage Part
翻译： 可在此部分查看属性使用说明

Props	Options（选项）	Description（描述）
①show-layout	true, false	Shows the pdf-content slot, using this you can see what contents will be converted to PDF.（显示PDF-content槽，使用它可以看到什么内容将被转换为PDF。 ）
②float-layout	true, false	Enabled by default. If the props is set to false The props show-layout will be overridden. The layout will not float and the layout will ALWAYS show.（默认启用。 如果props设置为false，则props show-layout将被重写。 布局将不会浮动和布局将总是显示。）
③enable-download	true, false	Enabled by default. When enabled the pdf will be downloaded and vise-versa.（默认启用。 当启用时，pdf将被下载，反之亦然。）
④preview-modal	true, false	Once you generate the pdf, PDF will be previewed on a modal, PDF will not be downloaded.（一旦您生成pdf, pdf将在一个模式上预览，pdf将不会被下载。 ）
⑤paginate-elements-by-height	Any Number（任意数字）	The number inputed will be used to paginate elements, the number will be in px units only.（输入的数字将用于对元素进行分页，该数字将以px为单位。）
⑥manual-pagination	true, false	When enabled, the package will NOT automatically paginate the elements. Instead the pagination process will rely on the elements with a class “html2pdf__page-break” to know where to page break, which is automatically done by html2pdf.js.（启用时，包不会自动对元素进行分页。 相反，分页过程将依赖于具有“html2pdf__page-break”类的元素来知道分页在哪里，这是由html2pdf.js自动完成的 。）
⑦filename	Any String（任意字符串）	给导出的pdf文件命名
⑧pdf-quality	0 - 2 (Can have decimal) （可以带小数点）	2 is the highest quality and 0.1 is the lowest quality, 0 will make the PDF disappear.（2是最高质量，0.1是最低质量，0会使PDF消失。）
⑨pdf-format	a0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10	This are the PDF formats (Paper Sizes)（这是PDF格式(纸张尺寸)）
⑩pdf-orientation	portrait, landscape（纸张、页面）纵向的，横向的）	This are the PDF orientation.（这是PDF的方向。）
⑪pdf-content-width	Any css sizes (e.g. “800px”, “65vw”, “70%”)	This is the PDF’s content width.（这是PDF的内容宽度。）
⑫html-to-pdf-options（见下面解释）	html-to-pdf-options details here	This prop gives a way to configure the whole html2pdf.js options.（这个支持提供了一种配置整个html2pdf.js选项的方法。）

html-to-pdf-options

Name	Type	Default	Description
①margin	number or array	0	PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin], or [top, left, bottom, right].（这是PDF的内容宽度。PDF页边距(以jsPDF单位)。 可以是单个数字，[vMargin, hMargin]，或[上，左，下，右]。 ）
②filename	string	‘file.pdf’	The default filename of the exported PDF.（导出的PDF文件的默认文件名。）
③image	object	{type: ‘jpeg’, quality: 0.95}	The image type and quality used to generate the PDF. See Image type and quality.（用于生成PDF的图像类型和质量。 参见图像类型和质量。）
④enableLinks	boolean	false	If enabled, PDF hyperlinks are automatically added ontop of all anchor tags.（如果启用，PDF超链接将自动添加到所有锚标记的顶部。 ）
⑤html2canvas	object	{ }	Configuration options sent directly to html2canvas (see here for usage).（配置选项直接发送到html2canvas(参考这里的用法)。 ）
⑥jsPDF	object	{ }	Configuration options sent directly to jsPDF (see here for usage).（配置选项直接发送到jsPDF(参见这里的用法)。）

IMPORTANT NOTE（重要提示）：

原文： If you have set a value to this prop, the props below will be overridden: ‘filename’, ‘pdf-quality’, ‘pdf-format’, ‘pdf-orientation’, Any value inputed to those props above will have no effect.
翻译：如果你为 html-to-pdf-options 这个属性设置了一个值，下面的属性将被覆盖: filename， pdf-quality， pdf-format， pdf-orientation。任何输入到上面这些属性的值都没有效果。

Sample Value of html-to-pdf-options（html-to-pdf-options的示例值）

其中，html2canvas 的属性 useCORS 设置为 true ，可解决图片跨域问题。如果后端没设置：Access-Control-Allow-Origin 为 *，不可解决图片跨域问题

htmlToPdfOptions: {
    margin: 0,
    filename: `hehehe.pdf`,
    image: {
        type: 'jpeg', 
        quality: 0.98
    },
    enableLinks: false,
    html2canvas: {
        scale: 1,
        useCORS: true // 允许资源跨域
    },
    jsPDF: {
        unit: 'in',
        format: 'a4',
        orientation: 'portrait'
    }
}

5、Events（事件）

原文：This events can seen in the Usage Part
翻译：可在此部分查看事件说明

Events	Description
@progress	This will return the progress of the PDF Generation. The event argument contains the progress of the PDF generation process.（这将返回PDF生成的进度。 event参数包含PDF生成过程的进度。 ）
@startPagination	This will be triggered on start of pagination process.（这将在分页过程开始时触发。）
@hasPaginated	This will be triggered after the pagination process.（这将在分页过程之后触发。）
@beforeDownload	This will be triggered before the PDF generation and download. The event arguments contains an object { html2pdf, options, pdfContent }, which can be used to have full control of html2pdf.js like e.g.(Add page count on each PDF page, Full control of jsPDF to design page, etc.), you will have to set the props :enable-download, :preview-modal to false so it will not generate the PDF.（这将在生成和下载PDF之前触发。 事件参数包含一个对象{html2pdf，选项，pdfContent}，它可以用来有html2pdf.js的完全控制，例如(在每个PDF页面上添加页面计数，jsPDF设计页面的完全控制等)，你必须设置道具:enable-download，:preview-modal为false，所以它将不会生成PDF。）
@hasDownloaded	This will be triggered after downloading the PDF. The event arguments contains the Blob File of the generated PDF. This will NOT be trigerred if the props enable-download AND preview-modal is set to false.（这将在下载PDF后触发。 事件参数包含生成的PDF的Blob文件。 这将不会被触发，如果道具启用下载和预览模式设置为false。）