Javascript 将html转成pdf,支持多页哦（html2canvas 和 jsPDF）

tml2canvas

简介

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

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

使用

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

html2canvas(element, {
 onrendered: function(canvas) {
 // canvas is the final rendered <canvas> element
 }
});

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

html2canvas(element, {
 onrendered: function(canvas) {
 document.body.appendChild(canvas);
 }
});

做个小例子代码如下，在线展示链接demo1

<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

使用方法如下：

// 默认a4大小，竖直方向，mm单位的PDF
var doc = new jsPDF();
// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');

在线演示demo2

图片生成PDF

使用方法如下：

// 三个参数，第一个方向，第二个单位，第三个尺寸格式
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');

在线演示demo3

文字与图片生成PDF

// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
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')

在线演示demo4

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

html2canvas + jsPDF

单页

将demo1的例子修改下：

<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>

在线演示demo5

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

你可以试试，验证一下自己的想法: demo6

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

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

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

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

嗯～，很好！巴特，难道没有发现问题吗？

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

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

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实例格式尺寸的内容不显示
（var pdf = new jsPDF('', 'pt', 'a4'); demo中就是a4纸的尺寸）
- addImage有两个参数可以控制图片在pdf中的位置

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

还是看代码吧：

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');
 }
})

在线演示demo7

两边留边距

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

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);

在线演示demo8

、类型转换先说类型

类型转换指将一种类型转换为另一种类型，那我们首先来说说JavaScript中的类型。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

1.1原始(Primitive)数据类型

Null
Undefined
Boolean
String
Number
Symbol
BigInt

BigInt是一种新的数据类型，用于当整数值大于Number数据类型支持的范围时。这种数据类型允许我们安全地对大整数执行算术操作，表示高分辨率的时间戳，使用大整数id，等等，而不需要使用库。重要的是要记住，不能使用Number和BigInt操作数的混合执行算术运算，需要通过显式转换其中的一种类型。此外，出于兼容性原因，不允许在BigInt上使用一元加号（+）运算符。

1.2引用(Object)数据类型

javaScript中内置了很多对象。

Array
Array
ArrayBuffer
AsyncFunction
Atomics
BigInt
BigInt64Array
BigUint64Array
Boolean
DataView
Date
Error
EvalError
Float32Array
Float64Array
Function
Generator
GeneratorFunction
Infinity
Int16Array
Int32Array
Int8Array
InternalError
Intl
Intl.Collator
Intl.DateTimeFormat
Intl.ListFormat
Intl.Locale
Intl.NumberFormat
Intl.PluralRules
Intl.RelativeTimeFormat
JSON
Map
Math
NaN
Number
Object
Promise
Proxy
RangeError
ReferenceError
Reflect
RegExp
Set
SharedArrayBuffer
String
Symbol
SyntaxError
TypeError
TypedArray
URIError
Uint16Array
Uint32Array
Uint8Array
Uint8ClampedArray
WeakMap
WeakSet
WebAssembly
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
globalThis
isFinite()
isNaN()
null
parseFloat
parseInt
undefined
unescape()
uneval()

详情请参考MDN，

大家不要看javaScript的内置对象这么多，转换时只需要把这么统统当做一个类型引用类型进行转换就行，在javaScript内部中转换也不会考虑这么多。

二、自动装箱

为了方便操作基本数据类型， ECMAScript还提供了三个特殊的引用类型，基本包装类型，String、Boolean、Number。有了这三个类型，在需要的时候，原始类型会自动转换成相应的包装对象（这个过程叫自动装箱）。自动装箱就是临时创建一个包装对象，将原始类型的值封装起来，以便调用包装对象的函数。但是原来那个变量的值不会有任何变化！

字符串是基本数据类型，为撒能调用方法了，这其实在后台进行了一系列的操作

创建String类型的一个实例
在实例上调用指定的方法。
销毁这个实例。

当然，你可以将Boolean 、Number 、String 这三个函数当作构造函数来使用，通过手动new包装类来装箱（得到包装对象）：

三、类型转换的规则

四、内部用于实现类型转换的4个函数

4.1 ToPrimitive ( input [ , PreferredType ] )

ToPrimitive将input装换为基本数据类型，PreferredType要么不传，要么是number、string。

4.1.1 PreferredType为number

如果input本身就是原始类型，直接返回input。
调用input.valueOf()，如果结果是原始类型，则返回这个结果。
调用input.toString()，如果结果是原始类型，则返回这个结果。
抛出TypeError异常。

4.1.2 PreferredType为string

如果input本身就是原始类型，直接返回input。
调用input.toString()，如果结果是原始类型，则返回这个结果。
调用input.valueOf()，如果结果是原始类型，则返回这个结果。
抛出TypeError异常。

4.1.3 PreferredType不传入

如果input是内置的Date类型，PreferredType 视为String
否则PreferredType 视为 Number。

来看看这道网上的面试题

+号操作符，只有当左右两边的类型相同（都为string或者number）是才进行操作。所以会经历如下步骤：

{}和1都会调用ToPrimitive，1原始类型直接返回。
{}内部调用DefaultNumber，使用valueOf方法，返回object。
在调用toString方法，返回[object, object]。
所以最后的结果就是[object, object]1。

这一类转换换汤不换药，转换规则都是这样的。

4.2 ToBoolean ( argument )

4.3 ToNumber( argument )

4.4 ToString( argument )

来源：ECMA-262草案/ 2019年11月7日 ECMAScript®2020语言规范

五、隐式类型装换

在执行过程中当js内部期望得到某种类型的值，而实际在那里的值是其他的类型，就会发生隐式类型转换。系统内部会自动调用我们前面说ToBoolean ( argument )、ToNumber ( argument )、ToString ( argument )，尝试转换成期望的数据类型。

5.1 期望得到boolean的值

因为在if的括号中，js期望得到boolean的值，所以对括号中每一个值都使用ToBoolean ( argument )，将它们转化成boolean。

5.2 期望得到number的值

因为在乘号的两端，js期望得到number类型的值，所以对右边的那个对象使用ToNumber ( argument )，得到结果5，再与乘号左边的3相乘。

5.3 加号有别于其他运算符

如果有一边是字符串，就把另外一边也转换为字符串
如果一方不是字符串或者数据，就转换为数据或者字符串

处了加号运算符，其他运算符，只要其中一方数据，那么另一方就被转换为数字

六、显示类型装换

手动调用Boolean(value)、Number(value)、String(value)完成的类型转换。

前面两个类型转换没有什么好解释的，我们看看最后一个String({a: 1});在内部发生的时候

执行转换String({a: 1})。
执行内部的ToString({a: 1})。
{a: 1}不是原始类型，执行ToPrimitive({a: 1}, hint string)。
调用toString方法，返回"[object, object]"。
执行ToString("[object, object]")，返回"[object, object]"。

参考文章：

tc39.es/ecma262/#se…
www.cxymsg.com/guide/jsBas

源自：https://juejin.im/post/5dc431a0e51d4504be09ca8c
声明：文章著作权归作者所有，如有侵权，请联系小编删除。

天笔者来与大家分享如何使用js来将汉字转拼音功能。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

首先请大家下载需要引入的js文件【仅9kb】。

下载地址：https://download.csdn.net/download/weixin_43606158/12198229

实现的效果【笔者没有将拼音隔开，你可以自行加入代码让其隔开。如果实在不会写请下方评论或私聊我吧。】：

小提示：如果想分开的话建议使用Pinyin.parse()方法。然后就考验你的js操作功底了。

使用方法【html小demo】：
下方引入的./wdHanzi2pinyin.js你需要在笔者提供的资源处下载而后使用。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./wdHanzi2pinyin.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="text"></div>
<script>
    const inputEvent = document.getElementById('input');
    const textEvent = document.getElementById('text');
    inputEvent.addEventListener('keyup', (event) => {
        console.log(Pinyin.parse(event.target.value))
        textEvent.innerText = (Pinyin.convertToPinyin(event.target.value).toLowerCase())
    })
</script>
</body>
</html>

进阶版本的。实时更新，请看这里:

最后的效果：

代码：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapbox {
            margin: 80px auto;
            width: 640px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <script src="./wdHanzi2pinyin.js"></script>
</head>
<body>
<div class="wrapbox">
    <input type="text" id="input">
    <div id="text"></div>
</div>
<script>
    const inputEvent = document.getElementById('input');
    const textEvent = document.getElementById('text');
    // 有几个字就渲染几套这样的模板：
    // <ruby>漢 <rp>(</rp><rt>han</rt><rp>)</rp></ruby>
    // 传入value数组格式。就是使用Pinyin.parse解析出来的
    // {
    //      source: "打"
    //      type: 2  type为2是汉字，为1则是其他
    //      target: "DA"
    // }
    function buildingRubys(parseItem) {
        let ruby = document.createElement('ruby');
        ruby.style.margin = '2px';
        if (parseItem.type === 2) {
            ruby.innerHTML = `
                ${parseItem.source}
                <rp>(</rp><rt>
                    ${(parseItem.target).toLowerCase()}
                </rt><rp>)</rp>
            `;
        } else {
            ruby.innerHTML = `${parseItem.source}`;
        }
        textEvent.appendChild(ruby);
    }
    inputEvent.addEventListener('change', (event) => {
        textEvent.innerHTML = '';
        const arr = Pinyin.parse(event.target.value) || [];
        arr.forEach((item) => {
            buildingRubys(item);
        })
    })
</script>
</body>
</html>

原文链接：https://blog.csdn.net/weixin_43606158/article/details/104557527

在线咨询

上一篇：纯JS编写打地鼠游戏
下一篇：116款新年字体艺术字PSD设计素材

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Javascript 将html转成pdf,支持多页哦（html2canvas 和 jsPDF）

进阶版本的。实时更新，请看这里:

您的项目需求