前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Javascript 将 HTML 页面生成 PDF 并下载

Javascript 将 HTML 页面生成 PDF 并下载

作者头像
前端教程
发布于 2018-07-27 02:50:28
发布于 2018-07-27 02:50:28
2.6K00
代码可运行
举报
文章被收录于专栏:程序员IT圈程序员IT圈
运行总次数:0
代码可运行

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

项目源码地址:https://github.com/linwalker/render-html-to-pdf

html2canvas
简介

我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行“截图”。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。

使用

使用的API也很简洁,下面代码可以将某个元素渲染成canvas:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
    }
});

通过onrendered方法,可以将生成的canvas进行回调,比如插入到页面中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html2canvas(element, {
    onrendered: function(canvas) {
       document.body.appendChild(canvas);
    }
});

做个小例子(demo1)代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<html>
  <head>
    <title>html2canvas example</title>
    <style type="text/css">...</style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>one</li>
          ...
        </ul>
      </nav>
    </header>
    <section>
      <aside>
        <h3>it is a title</h3>
        <a href="">Stone Giant</a>
        ...
     </aside>
      <article>
        <img src="./Stone.png">
        <h2>Stone Giant</h2>
        <p>Coming ... </p>
        <p>以一团石头...</p>
      </article>
    </section>
    <footer>write by linwalker @2017</footer>
    <script type="text/javascript" src="./html2canvas.js"></script>
    <script type="text/javascript">
        html2canvas(document.body, {
          onrendered:function(canvas) {
            document.body.appendChild(canvas)
          }
        })
    </script>
  </body>
</html>

这个例子将页面body中的元素渲染成canvas,并插入到body中。

jsPDF

jsPDF库可以用于浏览器端生成PDF。

文字生成PDF

使用方法如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 默认a4大小,竖直方向,mm单位的PDF
var doc = new jsPDF();

// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');
图片生成PDF

使用方法如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 三个参数,第一个方向,第二个单位,第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...;

doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');
文字与图片生成PDF
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 三个参数,第一个方向,第二个尺寸,第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])

// 将图片转化为dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...;

//设置字体大小
doc.setFontSize(20);

//10,20这两参数控制文字距离左边,与上边的距离
doc.text('Stone', 10, 20);

// 0, 40, 控制文字距离左边,与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')

生成pdf需要把转化的元素添加到jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。

html2canvas + jsPDF

单页

将demo1的例子修改下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" src="./js/jsPdf.debug.js"></script>
<script type="text/javascript">
      var downPdf = document.getElementById("renderPdf");
      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered:function(canvas) {

                  //返回图片dataURL,参数:图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  //addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                  pdf.save('stone.pdf');

              }
          })
      }
</script>

如果页面内容根据a4比例转化后高度超过a4纸高度呢,生成的pdf会怎么样?会分页吗?

你可以试试,验证一下自己的想法。

jsPDF提供了一个很有用的API, addPage(),我们可以通过 pdf.addPage(),来添加一页pdf,然后通过 pdf.addImage(...),将图片赋予这页pdf来显示。

那么我们如何确定哪里分页?

这个问题好回答,我们可以设置一个 pageHeight,超过这个高度的内容放入下一页pdf。

来捋一下思路,将html页面内容生成canvas图片,通过 addImage将第一页图片添加到pdf中,超过一页内容,通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到pdf中。

嗯~,很好!巴特,难道没有发现问题吗?

这个方法实现的前提是 — — 我们能根据 pageHeight先将整页内容生成的canvas图片分割成对应的小图片,然后一个萝卜一个坑,一页一页 addImage进去。

What? 想一想我们的canvas是肿么来的,不用拉上去,直接看下面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html2canvas(document.body, {
    onrendered:function(canvas) {
     //it is here we handle the canvas
    }
})

这里的 body就是要生成canvas的元素对象,一个元素生成一个canvas;那么我们需要一页一页的canvas,也就是说。。。

你觉得可能吗? 我觉得不太现实,按这思路要获取页面上不同位置的DOM元素,然后通过 htnl2canvas(element,option)来处理,先不说能不能刚好在每个 pageHeight的位置刚好找到一个DOM元素,就算找到了,这样做累不累。

累的话 :)可以看看下面这种方法。

多页

我提供的思路是我们只生成一个canvas,对就一个,转化元素就是你要转成pdf内容的母元素,在这篇demo里就是 body了;其他不变,也是超过一页内容就 addPage,然后 addImage,只不过这里添加的是同一个canvas。

当然这样做只会出现多页重复的pdf,那到底怎么实现正确分页显示。其实主要利用了jsPDF的两点:

  • 超过jsPDF实例格式尺寸的内容不显示( varpdf=newjsPDF('','pt','a4');demo中就是a4纸的尺寸)
  • addImage有两个参数可以控制图片在pdf中的位置

虽然每一页pdf上显示的图片是相同的,但我们通过调整图片的位置,产生了分页的错觉。以第二页为例,将竖直方向上的偏移设置为 -841.89即一张a4纸的高度,又因为超过a4纸高度范围的图片不显示,所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容,这就得到了分页的效果,以此类推。

还是看代码吧:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html2canvas(document.body, {
  onrendered:function(canvas) {

      var contentWidth = canvas.width;
      var contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = contentWidth / 592.28 * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = 592.28/contentWidth * contentHeight;

      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      var pdf = new jsPDF('', 'pt', 'a4');

      //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围,无需分页
      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('content.pdf');
  }
})
两边留边距

修改imgWidth,并且在addImage时x方向参数设置你要的边距,具体代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
...
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
...
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);

觉得本文对你有帮助?请分享给更多人。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-07-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员IT圈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
146. LRU 缓存机制
要在O(1)时间复杂度完成这两种操作,我们想到的使用HashMap来进行操作,而且参考LRUCache的特性,需要对元素进行移动或者删除,首选的是双向链表。
用户7447819
2021/07/23
2960
LeetCode146. LRU缓存机制
 基础数据结构的应用,HashMap中存的是key和Node,Node中存的是key和value
mathor
2018/08/16
3430
LeetCode146. LRU缓存机制
【LeetCode】146. LRU 缓存机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制 。 实现 LRUCache 类:
韩旭051
2021/01/07
4620
Leetcode LRU 缓存机制
缓存是一种提高数据读取性能的技术,在计算机中cpu和主内存之间读取数据存在差异,CPU和主内存之间有CPU缓存,而且在内存和硬盘有内存缓存。当主存容量远大于CPU缓存,或磁盘容量远大于主存时,哪些数据应该被应该被清理,哪些数据应该被保留,这就需要缓存淘汰策略来决定。常见的策略有三种:先进先出策略FIFO(First In,First Out)、最少使用策略LFU(Least Frequently Used)、最近最少使用策略LRU(Least Recently Used)。
用户10384376
2023/02/25
3170
Leetcode LRU 缓存机制
【Leetcode】146.LRU缓存机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作: 获取数据 get 和 写入数据 put 。
Leetcode名企之路
2019/03/18
1.1K0
【Leetcode】146.LRU缓存机制
2020-09-18:LRU手撸,说下时间复杂度和空间复杂度。
空间复杂度:O(capacity),因为哈希表和双向链表最多存储 capacity+1 个元素。
福大大架构师每日一题
2020/09/18
1.1K0
2020-09-18:LRU手撸,说下时间复杂度和空间复杂度。
实现 LRU 缓存算法
LRU 算法全称是最近最少使用算法(Least Recently Use),是一种简单的缓存策略。顾名思义,LRU 算法会选出最近最少使用的数据进行淘汰。
Se7en258
2022/06/24
1K0
实现 LRU 缓存算法
LeetCode-146-LRU缓存机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作: 获取数据 get 和 写入数据 put 。
benym
2022/07/14
3100
经典算法之链表篇(三)
ma布
2024/10/21
1060
经典算法之链表篇(三)
☆打卡算法☆LeetCode 146. LRU 缓存 算法解析
请你设计并实现一个满足  LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类:
恬静的小魔龙
2022/08/07
3150
☆打卡算法☆LeetCode 146. LRU 缓存 算法解析
LRU 缓存机制实现:哈希表 + 双向链表
LRU 缓存机制可以通过哈希表辅以双向链表实现,我们用一个哈希表和一个双向链表维护所有在缓存中的键值对。
一个会写诗的程序员
2021/03/23
2K0
LRU 缓存机制实现:哈希表 + 双向链表
搞定大厂算法面试之leetcode精讲15.链表
搞定大厂算法面试之leetcode精讲15.链表 视频讲解(高效学习):点击学习 目录: 1.开篇介绍 2.时间空间复杂度 3.动态规划 4.贪心 5.二分查找 6.深度优先&广度优先 7.双指针 8.滑动窗口 9.位运算 10.递归&分治 11剪枝&回溯 12.堆 13.单调栈 14.排序算法 15.链表 16.set&map 17.栈 18.队列 19.数组 20.字符串 21.树 22.字典树 23.并查集 24.其他类型题 链表操作如下图: 动画过大,点击查看 时间复杂度: prepend: O(1
全栈潇晨
2021/12/02
4490
一个今日头条的面试题——LRU原理和Redis实现
很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU。
Java架构
2018/09/20
2.1K0
一个今日头条的面试题——LRU原理和Redis实现
LRU算法与Caffeine、Redis中的缓存淘汰策略
在现代计算机系统中,缓存是提高系统性能的关键技术之一。为了避免频繁的IO操作,常见的做法是将数据存储在内存中的缓存中,以便快速访问。然而,由于内存资源有限,缓存的大小是有限的,因此需要一种策略来淘汰缓存中的数据,以便为新的数据腾出空间。本文将介绍一种常用的缓存淘汰策略——最近最少使用(Least Recently Used,LRU)算法,并且比较它与Caffeine和Redis中的缓存淘汰策略。
疯狂的KK
2023/08/17
5240
LRU算法与Caffeine、Redis中的缓存淘汰策略
数据结构界的“六脉神剑”:数组、链表、哈希表、栈、队列、树的终极解析与实战演练
在编程的世界里,数据结构是构建高效算法的基石。它们就像是武侠小说中的武功秘籍,掌握了它们,就能在代码的江湖中游刃有余。今天,我们就来深入探讨数据结构界的“六脉神剑”——数组、链表、哈希表、栈、队列和树。这六种数据结构,每一种都有其独特的运行原理和应用场景,它们是编程高手的必备技能。
疯狂的KK
2024/05/06
2870
数据结构界的“六脉神剑”:数组、链表、哈希表、栈、队列、树的终极解析与实战演练
146. LRU 缓存机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制 。 实现 LRUCache 类: LRUCache(int capacity) 以正整数作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否则返回 -1 。 void put(int key, int value) 如果关键字已经存在,则变更其数据值;如果关键字不存在,则插入该组「关键字-值」。当缓存容量达到上限时,它应该在写入新数据之
编程张无忌
2021/06/29
2310
漫画:LRU从实现到应用层层剖析(第一讲)
LRU是Least Recently Used的缩写,译为最近最少使用。它的理论基础为“最近使用的数据会在未来一段时期内仍然被使用,已经很久没有使用的数据大概率在未来很长一段时间仍然不会被使用”由于该思想非常契合业务场景 ,并且可以解决很多实际开发中的问题,所以我们经常通过LRU的思想来作缓存,一般也将其称为LRU缓存机制。因为恰好leetcode上有这道题,所以我干脆把题目贴这里。但是对于LRU而言,希望大家不要局限于本题(大家不用担心学不会,我希望能做一个全网最简单的版本,希望可以坚持看下去!)下面,我们一起学习一下。
程序员小浩
2020/03/30
3440
漫画:LRU从实现到应用层层剖析(第一讲)
Leetcode模块训练2
1. 两数之和(1)# 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案。 示例 1: 输入:nums = [2,7,11,15], target = 9 输出:[0,1] 解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1] 。 示例 2: 输入:nums = [3,2
素履coder
2022/11/16
3370
LRU算法简介
LRU(Least Recently Used)算法是一种缓存淘汰算法,常用于缓存系统中,通过保留最近使用的数据而淘汰最久未使用的数据,以提高缓存的命中率。LRU算法的核心思想是基于时间局部性原理:最近访问的数据在未来会被再次访问。
孟斯特
2024/01/28
6680
LRU算法简介
【LeetCode热题100】【链表】LRU缓存
我昨天面了天美L1的游戏客户端开发,面了我100分钟,问完实习、项目、计算机图形学和C++后给了我两道算法题做,一道是最长公共子序列,一道是LRU缓存,我知道是经典的题目,但是我都没敲过,我之前写过一个KV的数据库系统用过LRU(最近最少使用)缓存,用的是双向链表和哈希表解决的,当时是实现了一个双向链表,用来存储value,哈希表存储key和对应存储value的链表节点的指针,最近被访问的key就把它的节点移到链表头,超过容量就删掉链表尾
叶茂林
2024/03/31
920
相关推荐
146. LRU 缓存机制
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档