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将任何vue组件或元素转换为PDF, vue-html2pdf基本上只是一个vue包装器，并在幕后使用html2pdf.js。
2、Props
PropsThis 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选项的方法。） |
3、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(参见这里的用法)。） |
4、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。） |