JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁(yè)面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過 <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么標(biāo)簽的代碼會(huì)被忽略！！！如下代碼所示：

本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁(yè)面生成 PDF 文檔。

背景：幾個(gè)月前，一個(gè)客戶要求我們開發(fā)一個(gè)功能，用戶可以得到 PDF 格式的 React 頁(yè)面內(nèi)容。該頁(yè)面基本上是患者病例的報(bào)告和數(shù)據(jù)可視化結(jié)果，其中包含許多 SVG。另外還有一些特殊的請(qǐng)求來(lái)操縱布局，并對(duì) HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁(yè)面相比，PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。

由于這個(gè)任務(wù)比用簡(jiǎn)單的 CSS 規(guī)則解決要復(fù)雜得多，所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個(gè)主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。

在客戶端還是服務(wù)器端生成？
方案1：從 DOM 制作屏幕截圖
方案2：僅使用 PDF 庫(kù)
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將文件發(fā)送到客戶端并保存
在 Docker 中使用 Puppeteer
方案3 +1：CSS打印規(guī)則
總結(jié)

在客戶端還是服務(wù)器端生成？

在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。

即便如此，我仍然會(huì)展示這兩種方法的解決方案。

方案1：從 DOM 制作屏幕截圖

乍一看，這個(gè)解決方案似乎是最簡(jiǎn)單的，事實(shí)證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索，那么這就是一種簡(jiǎn)單易用的方法。

此方法簡(jiǎn)單明了：從頁(yè)面創(chuàng)建屏幕截圖，并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個(gè)包來(lái)實(shí)現(xiàn)：

Html2canvas，根據(jù) DOM 生成截圖
jsPdf，一個(gè)生成PDF的庫(kù)

開始編碼：

npm install html2canvas jspdf

就這樣！

請(qǐng)注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM（例如隱藏打印按鈕）時(shí)，它是非常方便的。我看到過很多使用這個(gè)包的項(xiàng)目。但不幸的是，這不是我們想要的，因?yàn)槲覀冃枰诤蠖送瓿蓪?duì) PDF 的創(chuàng)建工作。

方案2：只使用 PDF 庫(kù)

NPM上有幾個(gè)庫(kù)，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫(kù)，我將不得不重新調(diào)整頁(yè)面結(jié)構(gòu)。這肯定會(huì)損害可維護(hù)性，因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁(yè)面中。

請(qǐng)看下面的代碼。你需要親自手動(dòng)創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個(gè)元素并將其轉(zhuǎn)換為 PDF 格式，這是一項(xiàng)繁瑣的工作。必須找到一個(gè)更簡(jiǎn)單的方法。

這段代碼段來(lái)自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個(gè) PDF 文件，而不是對(duì)一個(gè)已經(jīng)存在的（并且不斷變化的）HTML 頁(yè)面進(jìn)行轉(zhuǎn)換，它還是很有用的。

最終方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome

什么是 Puppeteer？其文檔中寫道：

Puppeteer 是一個(gè) Node 庫(kù)，它提供了一個(gè)高級(jí) API 來(lái)控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運(yùn)行。

它本質(zhì)上是一個(gè)可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來(lái)生成頁(yè)面的截圖和PDF。優(yōu)秀！這正是我們想要的。

先用 npmi i puppeteer 安裝 Puppeteer，并實(shí)現(xiàn)我們的功能。

這是一個(gè)簡(jiǎn)單的功能，可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。

首先，我們啟動(dòng)瀏覽器（僅在 headless 模式下支持 PDF 生成），然后打開新頁(yè)面，設(shè)置視口，并導(dǎo)航到提供的URL。

設(shè)置 waitUntil:'networkidle0' 選項(xiàng)意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時(shí)，Puppeteer 會(huì)認(rèn)為導(dǎo)航已完成。（可以從 API docs 獲取更多信息。）

之后，我們將 PDF 保存為變量，關(guān)閉瀏覽器并返回 PDF。

注意：page.pdf 方法接收 options 對(duì)象，你可以使用 'path' 選項(xiàng)將文件保存到磁盤。如果未提供路徑，則 PDF 將不會(huì)被保存到磁盤，而是會(huì)得到緩沖區(qū)。（稍后我將討論如何處理它。）

如果需要先登錄才能從受保護(hù)的頁(yè)面生成 PDF，首先你要導(dǎo)航到登錄頁(yè)面，檢查表單元素的 ID 或名稱，填寫它們，然后提交表單：

要始終將登錄憑據(jù)保存在環(huán)境變量中，不要硬編碼！

樣式控制

Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記，Puppeteer 將生成具有已修改樣式的文件。

await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

將文件發(fā)送到客戶端并保存

好的，現(xiàn)在你已經(jīng)在后端生成了一個(gè) PDF 文件。接下來(lái)做什么？

如上所述，如果你不把文件保存到磁盤，將會(huì)得到一個(gè)緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。

現(xiàn)在，你只需在瀏覽器向服務(wù)器發(fā)送請(qǐng)求即可得到生成的 PDF。

一旦發(fā)送了請(qǐng)求，緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。

就這樣！如果單擊“保存”按鈕，那么瀏覽器將會(huì)保存 PDF。

在 Docker 中使用 Puppeteer

我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個(gè)小時(shí)的百度時(shí)間。

官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來(lái)可能會(huì)非常棘手”*。官方文檔有疑難解答部分，你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。

如果你在 Alpine 鏡像上安裝 Puppeteer，請(qǐng)確保在看到頁(yè)面的這一部分時(shí)再向下滾動(dòng)一點(diǎn)。否則你可能會(huì)忽略一個(gè)事實(shí)：你無(wú)法運(yùn)行最新的 Puppeteer 版本，并且你還需要用一個(gè)標(biāo)記禁用 shm ：

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否則，Puppeteer 子進(jìn)程可能會(huì)在正常啟動(dòng)之前耗盡內(nèi)存。

方案 3 + 1：CSS 打印規(guī)則

可能有人認(rèn)為從開發(fā)人員的角度來(lái)看，簡(jiǎn)單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現(xiàn)如何呢？

在選擇 CSS 打印規(guī)則時(shí)，你必須在每個(gè)瀏覽器中測(cè)試結(jié)果，以確保它提供的布局是相同的，并且它不是100％能做到這一點(diǎn)。

例如，在給定元素后面插入一個(gè) break-after 并不是一個(gè)多么高深的技術(shù)，但是你可能會(huì)驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。

除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師，在創(chuàng)建可打印頁(yè)面方面有很多的經(jīng)驗(yàn)，否則這可能會(huì)非常耗時(shí)。

如果你可以使打印樣式表保持簡(jiǎn)單，打印規(guī)則是很好用的。

讓我們來(lái)看一個(gè)例子吧。

@media print {
 .print-button {
 display: none;
 }
 
 .content div {
 break-after: always;
 }
}

上面的 CSS 隱藏了打印按鈕，并在每個(gè) div 之后插入一個(gè)分頁(yè)符，其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么，以及它們有什么問題，包括瀏覽器兼容性。

考慮到所有因素，如果你想從不那么復(fù)雜的頁(yè)面生成 PDF，CSS打印規(guī)則非常有效。

總結(jié)

讓我們快速回顧前面介紹的方案，以便從 HTML 頁(yè)面生成 PDF 文件：

從 DOM 產(chǎn)生截圖：當(dāng)你需要從頁(yè)面創(chuàng)建快照時(shí)（例如創(chuàng)建縮略圖）可能很有用，但是當(dāng)你需要處理大量數(shù)據(jù)時(shí)就會(huì)有些捉襟見肘。
只用 PDF 庫(kù)：如果你打算從頭開始以編程方式創(chuàng)建 PDF 文件，這是一個(gè)完美的解決方案。否則，你需要同時(shí)維護(hù) HTML 和 PDF 模板，這絕對(duì)是一個(gè)禁忌。
Puppeteer：盡管在 Docker 上工作相對(duì)困難，但它為我們的實(shí)現(xiàn)提供了最好的結(jié)果，而且編寫代碼也是最簡(jiǎn)單的。
CSS打印規(guī)則：如果你的用戶受過足夠的教育，知道如何把頁(yè)面內(nèi)容打印到文件，并且你的頁(yè)面相對(duì)簡(jiǎn)單，那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的，事實(shí)并非如此。

雖然今天是愚人節(jié)，但是以上所有內(nèi)容都是在真的！

作者：瘋狂的技術(shù)宅

鏈接：https://juejin.im/post/5ca1dc0251882543d569e075

tml2canvas

簡(jiǎn)介

我們可以直接在瀏覽器端使用html2canvas,對(duì)整個(gè)或局部頁(yè)面進(jìn)行‘截圖’。但這并不是真的截圖，而是通過遍歷頁(yè)面DOM結(jié)構(gòu)，收集所有元素信息及相應(yīng)樣式，渲染出canvas image。

由于html2canvas只能將它能處理的生成canvas image，因此渲染出來(lái)的結(jié)果并不是100%與原來(lái)一致。但它不需要服務(wù)器參與，整個(gè)圖片都由客戶端瀏覽器生成，使用很方便。

使用

使用的API也很簡(jiǎn)潔，下面代碼可以將某個(gè)元素渲染成canvas：

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

通過onrendered方法，可以將生成的canvas進(jìn)行回調(diào)，比如插入到頁(yè)面中：

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

做個(gè)小例子代碼如下，在線展示鏈接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>以一團(tuán)石頭...</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>

這個(gè)例子將頁(yè)面body中的元素渲染成canvas，并插入到body中

jsPDF

jsPDF庫(kù)可以用于瀏覽器端生成PDF。

文字生成PDF

使用方法如下：

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

在線演示demo2

圖片生成PDF

使用方法如下：

// 三個(gè)參數(shù)，第一個(gè)方向，第二個(gè)單位，第三個(gè)尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])
// 將圖片轉(zhuǎn)化為dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');

在線演示demo3

文字與圖片生成PDF

// 三個(gè)參數(shù)，第一個(gè)方向，第二個(gè)尺寸，第三個(gè)尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])
// 將圖片轉(zhuǎn)化為dataUrl
var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
//設(shè)置字體大小
doc.setFontSize(20);
//10,20這兩參數(shù)控制文字距離左邊，與上邊的距離
doc.text('Stone', 10, 20);
// 0, 40, 控制文字距離左邊，與上邊的距離
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')

在線演示demo4

生成pdf需要把轉(zhuǎn)化的元素添加到j(luò)sPDF實(shí)例中，也有添加html的功能，但某些元素?zé)o法生成在pdf中，因此可以使用html2canvas + jsPDF的方式將頁(yè)面轉(zhuǎn)成pdf。通過html2canvas將遍歷頁(yè)面元素，并渲染生成canvas，然后將canvas圖片格式添加到j(luò)sPDF實(shí)例，生成pdf。

html2canvas + jsPDF

單頁(yè)

將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，參數(shù)：圖片格式和清晰度(0-1)
 var pageData = canvas.toDataURL('image/jpeg', 1.0);
 //方向默認(rèn)豎直，尺寸ponits，格式a4[595.28,841.89]
 var pdf = new jsPDF('', 'pt', 'a4');
 //addImage后兩個(gè)參數(shù)控制添加圖片的尺寸，此處將頁(yè)面高度按照a4紙寬高比列進(jìn)行壓縮
 pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
 pdf.save('stone.pdf');
 }
 })
 }
</script>

在線演示demo5

如果頁(yè)面內(nèi)容根據(jù)a4比例轉(zhuǎn)化后高度超過a4紙高度呢，生成的pdf會(huì)怎么樣？會(huì)分頁(yè)嗎？

你可以試試，驗(yàn)證一下自己的想法: demo6

jsPDF提供了一個(gè)很有用的API，addPage()，我們可以通過pdf.addPage()，來(lái)添加一頁(yè)pdf，然后通過pdf.addImage(...)，將圖片賦予這頁(yè)pdf來(lái)顯示。

那么我們?nèi)绾未_定哪里分頁(yè)？

這個(gè)問題好回答，我們可以設(shè)置一個(gè)pageHeight，超過這個(gè)高度的內(nèi)容放入下一頁(yè)pdf。

來(lái)捋一下思路，將html頁(yè)面內(nèi)容生成canvas圖片，通過addImage將第一頁(yè)圖片添加到pdf中，超過一頁(yè)內(nèi)容，通過addPage()添加pdf頁(yè)數(shù),然后再通過addImage將下一頁(yè)圖片添加到pdf中。

嗯～，很好！巴特，難道沒有發(fā)現(xiàn)問題嗎？

這個(gè)方法實(shí)現(xiàn)的前提是 — — 我們能根據(jù)pageHeight先將整頁(yè)內(nèi)容生成的canvas圖片分割成對(duì)應(yīng)的小圖片，然后一個(gè)蘿卜一個(gè)坑，一頁(yè)一頁(yè)addImage進(jìn)去。

What? 想一想我們的canvas是腫么來(lái)的，不用拉上去，直接看下面：

html2canvas(document.body, {
 onrendered:function(canvas) {
 //it is here we handle the canvas
 }
})

這里的body就是要生成canvas的元素對(duì)象，一個(gè)元素生成一個(gè)canvas；那么我們需要一頁(yè)一頁(yè)的canvas，也就是說。。。

你覺得可能嗎？我覺得不太現(xiàn)實(shí)，按這思路要獲取頁(yè)面上不同位置的DOM元素，然后通過htnl2canvas(element,option)來(lái)處理，先不說能不能剛好在每個(gè)pageHeight的位置剛好找到一個(gè)DOM元素，就算找到了，這樣做累不累。

累的話

：）可以看看下面這種方法

多頁(yè)

我提供的思路是我們只生成一個(gè)canvas，對(duì)就一個(gè)，轉(zhuǎn)化元素就是你要轉(zhuǎn)成pdf內(nèi)容的母元素，在這篇demo里就是body了；其他不變，也是超過一頁(yè)內(nèi)容就addPage，然后addImage,只不過這里添加的是同一個(gè)canvas。

當(dāng)然這樣做只會(huì)出現(xiàn)多頁(yè)重復(fù)的pdf，那到底怎么實(shí)現(xiàn)正確分頁(yè)顯示。其實(shí)主要利用了jsPDF的兩點(diǎn)：

- 超過jsPDF實(shí)例格式尺寸的內(nèi)容不顯示
（var pdf = new jsPDF('', 'pt', 'a4'); demo中就是a4紙的尺寸）
- addImage有兩個(gè)參數(shù)可以控制圖片在pdf中的位置

雖然每一頁(yè)pdf上顯示的圖片是相同的，但我們通過調(diào)整圖片的位置，產(chǎn)生了分頁(yè)的錯(cuò)覺。以第二頁(yè)為例，將豎直方向上的偏移設(shè)置為-841.89即一張a4紙的高度，又因?yàn)槌^a4紙高度范圍的圖片不顯示，所以第二頁(yè)顯示了圖片豎直方向上[841.89,1682.78]范圍內(nèi)的內(nèi)容，這就得到了分頁(yè)的效果，以此類推。

還是看代碼吧：

html2canvas(document.body, {
 onrendered:function(canvas) {
 var contentWidth = canvas.width;
 var contentHeight = canvas.height;
 //一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
 var pageHeight = contentWidth / 592.28 * 841.89;
 //未生成pdf的html頁(yè)面高度
 var leftHeight = contentHeight;
 //頁(yè)面偏移
 var position = 0;
 //a4紙的尺寸[595.28,841.89]，html頁(yè)面生成的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');
 //有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)
 //當(dāng)內(nèi)容未超過pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
 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;
 //避免添加空白頁(yè)
 if(leftHeight > 0) {
 pdf.addPage();
 }
 }
 }
 pdf.save('content.pdf');
 }
})

在線演示demo7

兩邊留邊距

修改imgWidth，并且在addImage時(shí)x方向參數(shù)設(shè)置你要的邊距，具體代碼如下

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

在線咨詢

上一篇：上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖分享html虛線邊框設(shè)置教程
下一篇：velocity模板html格式縮進(jìn)問題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript代碼怎樣引入到HTML中？

您的項(xiàng)目需求