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）

進階版本的。實時更新，請看這里:

您的項目需求