Vue页面导出PDF

本文介绍了如何在Vue项目中使用html2canvas和jspdf库将页面转换为图片并生成PDF文件。首先安装这两个依赖,然后定义一个全局函数`htmlToPdf.js`,在main.js中引入并挂载到Vue原型上。在需要导出的页面中,通过调用`getPdf`方法,结合DOM元素和用户定义的标题,即可实现页面内容的PDF导出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理..

说起来很容易,那么具体怎么实现呢?

1 、我们要添加两个模块

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置


// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  }
}

3、在main.js中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在需要的导出的页面..调用我们的getPdf方法即可.

Html


<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
	//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>

js

export default {
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'
      }
  }
 }

文件转载与[前端笔记] Vue导出页面为PDF格式_Pratise的Code成长史-优快云博客_vue导出pdf

如有侵权联系我删除

### Vue 页面导出 PDF 出现空白页解决方案 在处理 Vue 应用程序中的 PDF 导出功能时,遇到空白页的问题通常由多种因素引起。以下是几种常见原因及其对应的解决方案。 #### 1. 高度计算错误 如果 HTML 内容的高度未正确传递给 PDF 渲染引擎,则可能导致生成的 PDF 中出现不必要的空白页。确保用于渲染的内容容器具有明确的高度属性,并且该高度能够动态调整以适应实际内容大小[^1]。 ```css /* CSS */ .export-content { height: auto; } ``` #### 2. 分页控制不当 对于较长文档,在转换过程中可能会因为分页逻辑不合理而产生额外空白页。通过应用特定于浏览器打印或 PDF 转换器支持的 CSS 属性来优化分页行为可以有效减少这种情况的发生[^2]: ```css /* CSS */ .page-break { page-break-after: always; } table tr td, table th { page-break-inside: avoid !important; } ``` 上述代码片段中定义了一个 `.page-break` 类,可以在适当位置手动插入强制分页符;同时设置了表格单元格不允许内部打断显示,从而防止跨页拆分表格造成视觉上的混乱。 #### 3. 插件配置问题 某些情况下使用的第三方库(如 `html2canvas`, `jsPDF` 或者其他工具)可能存在默认设置不适合当前场景的情况。检查所选插件官方文档并根据需求调整参数配置可能是解决问题的关键之一[^3]。 例如使用 `pdfMake` 进行复杂布局设计时需要注意其特有的数据结构以及样式声明方式: ```javascript // JavaScript (Vue method) generatePdf() { const docDefinition = { content: [ { text: 'Title', style: 'header' }, // ... more contents ... ], styles: { header: { fontSize: 18, bold: true, margin: [0, 0, 0, 10], } }, defaultStyle: { columnGap: 0 } }; pdfMake.createPdf(docDefinition).download('document.pdf'); }, ``` 此示例展示了如何构建一个简单的 PDF 文档定义对象并通过调用 `createPdf()` 方法完成文件下载操作。注意这里指定了全局默认字体间距为零 (`columnGap`) 来避免潜在因边距过大而导致的新建空白页现象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值