前端黑科技：一鍵將網(wǎng)頁(yè)變 PDF，so easy！

數(shù)字化辦公時(shí)代，PDF以其跨平臺(tái)、易于打印和分享等優(yōu)點(diǎn)，成為了文檔格式的首選。而今天，我們要學(xué)習(xí)一項(xiàng)超實(shí)用的前端黑科技，無(wú)需任何插件，就能將網(wǎng)頁(yè)內(nèi)容轉(zhuǎn)化為PDF并下載，輕松提升工作效率！

告別繁瑣，三步實(shí)現(xiàn)PDF導(dǎo)出

引入JS庫(kù)：使用 jsPDF 和 html2canvas 這兩個(gè)強(qiáng)大的JavaScript庫(kù)，為PDF生成提供支持。

   npm install jspdf html2canvas

HTML代碼：創(chuàng)建一個(gè)按鈕，用于觸發(fā)PDF生成和下載功能。

   <button @click="exportPDF">導(dǎo)出PDF</button>
   <div id="contentToConvert">
    <!-- 需要轉(zhuǎn)換為 PDF 的內(nèi)容 -->
   </div>

JavaScript代碼：編寫 exportPDF 函數(shù)，利用 html2canvas 將HTML元素轉(zhuǎn)換為 canvas，再使用 jsPDF 將 canvas 轉(zhuǎn)換為 PDF 并下載。

   import jsPDF from 'jspdf';
   import html2canvas from 'html2canvas';

   export default {
     methods: {
       async exportPDF() {
         const element = document.getElementById('contentToConvert');
         const canvas = await html2canvas(element);
         const imgData = canvas.toDataURL('image/png');

         const pdf = new jsPDF({
           orientation: 'p', // 縱向
           unit: 'mm', // 單位
           format: 'a4' // 紙張大小
         });

         const imgWidth = 210; // A4紙寬度，單位mm
         const pageHeight = 297; // A4紙高度，單位mm
         let imgHeight = (canvas.height * imgWidth) / canvas.width;
         let position = 0;
         let pageData = '';

         // 處理多頁(yè)情況
         if (imgHeight < pageHeight) {
           pageData = imgData;
         } else {
           while (imgHeight > 0) {
             pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight > pageHeight ? pageHeight : imgHeight);
             imgHeight -= pageHeight;
             position -= pageHeight;
             if (imgHeight > 0) {
               pdf.addPage();
             }
           }
         }
         // 添加圖片到PDF
         pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);
         // 保存PDF
         pdf.save('download.pdf');
       }
     }
   };

代碼解析：

引入 jsPDF 和 html2canvas：

   import jsPDF from 'jspdf';
   import html2canvas from 'html2canvas';

這兩行代碼引入了 jsPDF 和 html2canvas 庫(kù)，用于生成PDF和將HTML元素轉(zhuǎn)換為 canvas。

獲取目標(biāo)元素：

   const element = document.getElementById('contentToConvert');

這行代碼獲取了ID為 contentToConvert 的HTML元素，也就是我們需要轉(zhuǎn)換為PDF的內(nèi)容。

將HTML元素轉(zhuǎn)換為Canvas：

   const canvas = await html2canvas(element);

這行代碼使用 html2canvas 將目標(biāo)元素轉(zhuǎn)換為 canvas 對(duì)象。

創(chuàng)建PDF對(duì)象：

   const pdf = new jsPDF({
       orientation: 'p', // 縱向
       unit: 'mm', // 單位
       format: 'a4' // 紙張大小
     });

這行代碼創(chuàng)建了一個(gè)新的 jsPDF 對(duì)象，并設(shè)置了PDF的頁(yè)面方向、單位和紙張大小。

計(jì)算圖片尺寸和位置：

   const imgWidth = 210; // A4紙寬度，單位mm
   const pageHeight = 297; // A4紙高度，單位mm
   let imgHeight = (canvas.height * imgWidth) / canvas.width;
   let position = 0;
   let pageData = '';

這幾行代碼計(jì)算了要添加到PDF中的圖片的寬度、高度和位置。

添加圖片到PDF：

   pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);

這行代碼將圖片添加到PDF文檔中。

保存PDF文件：

   pdf.save('download.pdf');

這行代碼將生成的PDF文件保存到本地，文件名為 download.pdf。

總結(jié)

通過(guò)以上步驟，我們就能輕松地將網(wǎng)頁(yè)內(nèi)容轉(zhuǎn)換為PDF并下載。這項(xiàng)技術(shù)不僅可以用于生成各種報(bào)表和文檔，還可以用于制作電子書、電子票據(jù)等，應(yīng)用場(chǎng)景非常廣泛，快來(lái)試試吧！

近碰到個(gè)需求，需要把當(dāng)前頁(yè)面生成 pdf，并下載。弄了幾天，自己整理整理，記錄下來(lái)，我覺(jué)得應(yīng)該會(huì)有人需要：）

項(xiàng)目源碼地址：https://github.com/linwalker/render-html-to-pdf

簡(jiǎn)介

我們可以直接在瀏覽器端使用html2canvas，對(duì)整個(gè)或局部頁(yè)面進(jìn)行“截圖”。但這并不是真的截圖，而是通過(guò)遍歷頁(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
 }
});

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

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

做個(gè)小例子（demo1）代碼如下：

這個(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');

文字與圖片生成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')

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

html2canvas + jsPDF

單頁(yè)

將demo1的例子修改下：

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

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

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

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

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

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

嗯～，很好！巴特，難道沒(méi)有發(fā)現(xiàn)問(wè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，也就是說(shuō)。。。

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

累的話：）可以看看下面這種方法。

多頁(yè)

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

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

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

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

還是看代碼吧：

兩邊留邊距

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

作者：linwalkerhttps://segmentfault.com/a/1190000009211079

路：通過(guò) html2canvas 將 HTML 頁(yè)面轉(zhuǎn)換成圖片，然后再通過(guò) jspdf 將圖片的 base64 生成為 pdf 文件。

1. 安裝及引入

// 將頁(yè)面 html 轉(zhuǎn)換成圖片
npm install html2canvas --save  
// 將圖片生成 pdf
npm install jspdf --save
復(fù)制代碼

在項(xiàng)目主文件 main.js 中引入定義好的實(shí)現(xiàn)方法并注冊(cè)

import htmlToPdf from '@/utils/htmlToPdf';
// 使用 Vue.use() 方法就會(huì)調(diào)用工具方法中的install方法
Vue.use(htmlToPdf);
復(fù)制代碼

2. 封裝導(dǎo)出 pdf 文件方法

配置詳解

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
第一個(gè)參數(shù)： l：橫向  p：縱向
第二個(gè)參數(shù)：測(cè)量單位（"pt"，"mm", "cm", "m", "in" or "px"）；
第三個(gè)參數(shù)：可以是下面格式，默認(rèn)為“a4”。如需自定義格式，只需將大小作為數(shù)字?jǐn)?shù)組傳遞，如：[592.28, 841.89];
		   a0 - a10
		   b0 - b10
		   c0 - c10
  		   dl
		   letter
		   government-letter
		   legal
		   junior-legal
		   ledger
		   tabloid
		   credit-card
復(fù)制代碼

pdf.addPage() 在PDF文檔中添加新頁(yè)面，默認(rèn)a4。參數(shù)如下：

pdf.addImage() 將圖像添加到PDF。參數(shù)如下：

刪除某頁(yè) pdf

let targetPage = pdf.internal.getNumberOfPages(); //獲取總頁(yè)
pdf.deletePage(targetPage); // 刪除目標(biāo)頁(yè)
復(fù)制代碼

保存 pdf 文檔

pdf.save(`測(cè)試.pdf`);
復(fù)制代碼

封裝導(dǎo)出 pdf 文件方法（utils/htmlToPdf.js）

// 導(dǎo)出頁(yè)面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      // 當(dāng)下載pdf時(shí)，若不在頁(yè)面頂部會(huì)造成PDF樣式不對(duì),所以先回到頁(yè)面頂部再下載
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        // 獲取canvas畫布的寬高
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
	      // 一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      // 未生成pdf的html頁(yè)面高度
        let leftHeight = contentHeight;
	      // 頁(yè)面偏移
        let position = 0;
	      // html頁(yè)面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調(diào)換尺寸）
        let imgWidth = 841.89;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('l', 'pt', 'a4');
        // 兩個(gè)高度需要區(qū)分: 一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度
        // 當(dāng)內(nèi)容未超過(guò)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 -= 592.28;
            // 避免添加空白頁(yè)
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}
復(fù)制代碼

相關(guān)組件中應(yīng)用

<template>
  <div class="wrap" >
    <div id="pdfDom" style="padding: 10px;">
      <el-table
        :data="tableData"
        border>
        <el-table-column prop="date" label="日期" width="250"></el-table-column>
        <el-table-column prop="name" label="姓名" width="250"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">導(dǎo)出PDF</button>
  </div>

</template>
 
<script>
export default {
  data() { 
    return {
      exportPDFtitle: "頁(yè)面導(dǎo)出PDF文件名",
      tableData: [
         {
          date: '2016-05-06',
          name: '王小虎',
          address: '重慶市九龍坡區(qū)火炬大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '重慶市九龍坡區(qū)火炬大道'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        },, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        },{
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        },
      ]
    } 
  }, 
  methods: {
    btnClick(){
      this.$nextTick(() => {this.getPdf();})
    },
  },  
}
</script>  
復(fù)制代碼

效果

待優(yōu)化部分

分頁(yè)時(shí)，頁(yè)面內(nèi)容被截?cái)啵g迎留言討論交流）；
不同內(nèi)容，另起一頁(yè)開始；思路：計(jì)算超出內(nèi)容，占最后一頁(yè)的高度（設(shè)定間距 = 頁(yè)面高度 - 超出部分高度）。

如果你覺(jué)得這篇文章對(duì)你有點(diǎn)用的話，麻煩請(qǐng)給我們的開源項(xiàng)目點(diǎn)點(diǎn)star:http://github.crmeb.net/u/defu 不勝感激！

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：HTML 實(shí)例

您的項(xiàng)目需求

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

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