前端黑科技：一鍵將網頁變 PDF，so easy！

數字化辦公時代，PDF以其跨平臺、易于打印和分享等優點，成為了文檔格式的首選。而今天，我們要學習一項超實用的前端黑科技，無需任何插件，就能將網頁內容轉化為PDF并下載，輕松提升工作效率！

告別繁瑣，三步實現PDF導出

引入JS庫：使用 jsPDF 和 html2canvas 這兩個強大的JavaScript庫，為PDF生成提供支持。

   npm install jspdf html2canvas

HTML代碼：創建一個按鈕，用于觸發PDF生成和下載功能。

   <button @click="exportPDF">導出PDF</button>
   <div id="contentToConvert">
    <!-- 需要轉換為 PDF 的內容 -->
   </div>

JavaScript代碼：編寫 exportPDF 函數，利用 html2canvas 將HTML元素轉換為 canvas，再使用 jsPDF 將 canvas 轉換為 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 = '';

         // 處理多頁情況
         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 庫，用于生成PDF和將HTML元素轉換為 canvas。

獲取目標元素：

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

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

將HTML元素轉換為Canvas：

   const canvas = await html2canvas(element);

這行代碼使用 html2canvas 將目標元素轉換為 canvas 對象。

創建PDF對象：

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

這行代碼創建了一個新的 jsPDF 對象，并設置了PDF的頁面方向、單位和紙張大小。

計算圖片尺寸和位置：

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

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

添加圖片到PDF：

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

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

保存PDF文件：

   pdf.save('download.pdf');

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

總結

通過以上步驟，我們就能輕松地將網頁內容轉換為PDF并下載。這項技術不僅可以用于生成各種報表和文檔，還可以用于制作電子書、電子票據等，應用場景非常廣泛，快來試試吧！

近碰到個需求，需要把當前頁面生成 pdf，并下載。弄了幾天，自己整理整理，記錄下來，我覺得應該會有人需要：）

項目源碼地址：https://github.com/linwalker/render-html-to-pdf

簡介

我們可以直接在瀏覽器端使用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）代碼如下：

這個例子將頁面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');

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

生成pdf需要把轉化的元素添加到jsPDF實例中，也有添加html的功能，但某些元素無法生成在pdf中，因此可以使用html2canvas + jsPDF的方式將頁面轉成pdf。通過html2canvas將遍歷頁面元素，并渲染生成canvas，然后將canvas圖片格式添加到jsPDF實例，生成pdf。

html2canvas + jsPDF

單頁

將demo1的例子修改下：

如果頁面內容根據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是腫么來的，不用拉上去，直接看下面：

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]范圍內的內容，這就得到了分頁的效果，以此類推。

還是看代碼吧：

兩邊留邊距

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

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

路：通過 html2canvas 將 HTML 頁面轉換成圖片，然后再通過 jspdf 將圖片的 base64 生成為 pdf 文件。

1. 安裝及引入

// 將頁面 html 轉換成圖片
npm install html2canvas --save  
// 將圖片生成 pdf
npm install jspdf --save
復制代碼

在項目主文件 main.js 中引入定義好的實現方法并注冊

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

2. 封裝導出 pdf 文件方法

配置詳解

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

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

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

刪除某頁 pdf

let targetPage = pdf.internal.getNumberOfPages(); //獲取總頁
pdf.deletePage(targetPage); // 刪除目標頁
復制代碼

保存 pdf 文檔

pdf.save(`測試.pdf`);
復制代碼

封裝導出 pdf 文件方法（utils/htmlToPdf.js）

// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      // 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載
      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;
	      // 一頁pdf顯示html頁面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      // 未生成pdf的html頁面高度
        let leftHeight = contentHeight;
	      // 頁面偏移
        let position = 0;
	      // html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）
        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');
        // 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度
        // 當內容未超過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 -= 592.28;
            // 避免添加空白頁
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}
復制代碼

相關組件中應用

<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">導出PDF</button>
  </div>

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

效果

待優化部分

分頁時，頁面內容被截斷（歡迎留言討論交流）；
不同內容，另起一頁開始；思路：計算超出內容，占最后一頁的高度（設定間距 = 頁面高度 - 超出部分高度）。

如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點star:http://github.crmeb.net/u/defu 不勝感激！

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商