前端实现生成pdf文件并下载

简介: 前端实现生成pdf文件并下载

思路

通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件

下载依赖

  1. html2canvas 把html转成图片
  2. jspdf 将图片的 base64 生成为 pdf 文件
npm i html2canvas jspdf -S

使用方式

<a-button type="primary" @click="getPdf(`文档`)">导出</a-button>
 <!-- 要转成pdf导出的html, id为resultsHuiZongTableId-->
<div class="student-info" id="resultsHuiZongTableId">
  <div class="student-info-item">姓名:张三</div>
  <div class="student-info-item">年龄:18</div>
  <div class="student-info-item">学校:xxx高中</div>
  <div class="student-info-item">班级:6班</div>
</div>
import html2Canvas from 'html2canvas'
      import JsPDF from 'jspdf'
      getPdf(title) {
        return new Promise(resolve => {
            html2Canvas(document.querySelector('#resultsHuiZongTableId'), {
                allowTaint: false,
                useCORS: true, // allowTaint、useCORS只能够出现一个
                imageTimeout: 0,
                dpi: 300,  // 像素
                scale: 4,  // 图片大小
            }).then(function (canvas) {
                // document.body.appendChild(canvas)
                // 用于将canvas对象转换为base64位编码
                let pageData = canvas.toDataURL('image/jpeg', 1.0),
                    canvasWidth = canvas.width,
                    canvasHeight = canvas.height,
                    concentWidth = 500,
                    concentHeight = Math.round((concentWidth / canvasWidth) * canvasHeight),
                    position = 72,
                    pageHeight = 892,
                    height = concentHeight
                console.log(height, pageHeight)
                // 新建一个new JsPDF,A3的像素大小 842*1191,A4的像素大小 592*841。这个px像素不准确,不清楚他们的像素大小来源如何
                let PDF = new JsPDF('p', 'px', 'a3')
                if (height <= pageHeight) {
                    // 添加图片
                    PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)
                } else {
                    while (height > 0) {
                        PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)
                        height -= pageHeight
                        position -= pageHeight
                        if (height > 0) {
                            PDF.addPage()
                        }
                    }
                }
                // 保存 pdf 文档
                PDF.save(`${title}.pdf`)
                resolve(true)
            }).catch(() => {
            }).finally(() => {
              this.pdfExporting = false;
              console.log(88888)
            })
        })
      },

备注

jspdf 转pdf,会存在以下问题:

1、无法自动分页,需要自己计算内外边距实现分页

2、多转几页,会出现颜色、内容丢失

参考

https://www.jianshu.com/p/318285100592

https://blog.csdn.net/g_geng/article/details/126834015

目录
相关文章
|
17小时前
|
前端开发 JavaScript
前端 JS 经典:文件流下载
前端 JS 经典:文件流下载
5 0
|
3天前
|
前端开发 JavaScript 安全
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原
17 0
|
3天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
3天前
|
前端开发
【专栏】在前端开发中,package.json 文件是项目的重要配置文件,其中包含了许多与项目相关的信息和设置
【4月更文挑战第29天】`package.json`的`proxy`字段用于配置开发环境中的代理服务器,解决跨域问题并模拟后端响应。它是字符串类型,值为代理服务器地址。主要应用场景包括前端跨域请求和本地调试。配置时在`package.json`顶层添加`proxy`字段,如`"proxy": "http://localhost:8080"`。该配置仅在开发环境中生效,生产环境需另寻解决方案。
|
3天前
|
弹性计算 运维 Shell
|
3天前
|
缓存 前端开发 算法
前端需要加载一个大体积的文件时,可以这么优化
前端需要加载一个大体积的文件时,可以这么优化
|
3天前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
|
3天前
|
JSON 监控 JavaScript
【LLM】基于LLama构建智能助理实现与PDF文件智能对话
【4月更文挑战第12天】构建智能助理服务,实现与PDF的自由对话
|
3天前
|
Python
python html(文件/url/html字符串)转pdf
python html(文件/url/html字符串)转pdf
10 0
|
3天前
|
Python
Python 合并多个 PDF 文件并建立书签目录
Python 合并多个 PDF 文件并建立书签目录
16 1