基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出

更新時(shí)間：2022年04月26日 10:36:30 作者：宜簡(jiǎn)

這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁(yè)面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下

前言

近期公司提出了一個(gè)新需求，希望前端能夠根據(jù)UI設(shè)計(jì)繪制運(yùn)動(dòng)報(bào)告界面，完成數(shù)據(jù)展示，包括圖標(biāo)展示，并且能夠?qū)TML頁(yè)面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。基于公司需求，查詢(xún)了很多資料，最后選定了三種技術(shù)方案，并完成Demo,當(dāng)然三種方案都有優(yōu)缺點(diǎn)，所以還需要老大根據(jù)效果選定最終實(shí)現(xiàn)方案。

方案一

window.print瀏覽器打印是一個(gè)非常成熟的東西，直接調(diào)用window.print或者document.execCommand('print')達(dá)到打印及保存效果，Mac徽標(biāo)鍵加p直接調(diào)用查看效果，windows可以ctrl+p查看效果

問(wèn)題

樣式的調(diào)節(jié)
隱藏某些頁(yè)面不相關(guān)內(nèi)容
A4紙界面的適應(yīng)

解決方案

1.媒介查詢(xún)

p { 
font-size: 12px; 
} 
@media print { 
    p { 
        font-size: 14px; 
    } 
}
// 隱藏部分內(nèi)容
@media print { 
    span { 
        display:none
    } 
}

2.替換body內(nèi)容

根據(jù)id獲取需要打印的節(jié)點(diǎn)innderHTML，并將body內(nèi)容進(jìn)行替換，執(zhí)行打印，打印完成后，還原body內(nèi)容。

<body> 
    <input type="button" value="打印此頁(yè)面" onclick="printpage()" /> 
    <div id="printContent">打印內(nèi)容</div> 
    <script> 
        function printpage() { 
            let newstr = document.getElementById("printContent").innerHTML; 
            let oldstr = document.body.innerHTML;
            document.body.innerHTML = newstr;
            window.print(); 
            document.body.innerHTML = oldstr; 
            return false; 
        } 
    </script> 
</body>

3.打印事件監(jiān)聽(tīng)

通過(guò)打印前事件onbeforeprint及打印后事件onafterprint() 進(jìn)行打印元素的隱藏及展示

window.onbeforeprint = function(event) { 
        //隱藏?zé)o關(guān)元素
}; 
window.onafterprint = function(event) { 
        //展示無(wú)關(guān)元素 
};

官網(wǎng)地址

使用參考文檔

方案二

html2canvas + jspdf，使用html2canvas將使用canvas將頁(yè)面轉(zhuǎn)為base64圖片流，并插入jspdf插件中，保存并下載pdf。

使用

1.安裝：npm install --save htmlcanvas2npm install --save jspdf

2.繪制較短頁(yè)面

新建htmlToPdf.js導(dǎo)出文件

// utils/htmlToPdf.js：導(dǎo)出頁(yè)面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install(Vue, options) {
    // id-導(dǎo)出pdf的div容器；title-導(dǎo)出文件標(biāo)題
    Vue.prototype.htmlToPdf = (id, title) => {
      const element = document.getElementById(`${id}`)
      const opts = {
        scale: 12, // 縮放比例，提高生成圖片清晰度
        useCORS: true, // 允許加載跨域的圖片
        allowTaint: false, // 允許圖片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 檢測(cè)每張圖片已經(jīng)加載完成
        logging: true // 日志開(kāi)關(guān)，發(fā)布的時(shí)候記得改成 false
      }

      html2Canvas(element, opts)
        .then((canvas) => {
          console.log(canvas)
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          // 一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
          const pageHeight = (contentWidth / 592.28) * 841.89
          // 未生成pdf的html頁(yè)面高度
          let leftHeight = contentHeight
          // 頁(yè)面偏移
          let position = 0
          // a4紙的尺寸[595.28,841.89]，html頁(yè)面生成的canvas在pdf中圖片的寬高
          const imgWidth = 595.28
          const imgHeight = (592.28 / contentWidth) * contentHeight
          const pageData = canvas.toDataURL('image/jpeg', 1.0)
          console.log(pageData)
          // a4紙縱向，一般默認(rèn)使用；new JsPDF('landscape'); 橫向頁(yè)面
          const PDF = new JsPDF('', 'pt', 'a4')

          // 當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
          if (leftHeight < pageHeight) {
            // addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else {
            // 超過(guò)一頁(yè)時(shí)，分頁(yè)打?。宽?yè)高度841.89）
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(title + '.pdf')
        })
        .catch((error) => {
          console.log('打印失敗', error)
        })
    }
  }
}

index.vue中使用導(dǎo)出方法

<template>
  <div>
      <div
       id="pdfDom"
      >
        測(cè)試數(shù)據(jù)
      </div>
      <el-button type="primary" round style="background: #4849FF" @click="btnClick">導(dǎo)出PDF</el-button>
    </div>
 </template>
 <script>
 import JsPDF from 'jspdf'
 import html2Canvas from 'html2canvas'
 mounted() {
    // 導(dǎo)出pdf
    btnClick() {
     this.$nextTick(() => {
         this.htmlToPdf('pdfDom', '個(gè)人報(bào)告')
     })
    },
  },
 </script>

問(wèn)題及解決方案

1.頁(yè)面繪制轉(zhuǎn)碼時(shí)間過(guò)長(zhǎng)

可以考慮在頁(yè)面初始化完成后就對(duì)頁(yè)面進(jìn)行抓取繪制及轉(zhuǎn)碼，將轉(zhuǎn)碼數(shù)據(jù)保存，在點(diǎn)擊下載時(shí)直接生成pdf并保存。

2.html2canvas能夠抓取的頁(yè)面長(zhǎng)度大約為1440，兩個(gè)A4頁(yè)面左右，超出不會(huì)抓取，需要控制多個(gè)節(jié)點(diǎn)，循環(huán)繪制

繪制多個(gè)節(jié)點(diǎn)

新建htmlToPdf.js導(dǎo)出文件

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install(Vue, options) {
    // id-導(dǎo)出pdf的div容器；title-導(dǎo)出文件標(biāo)題
    Vue.prototype.htmlToPdf = (name, title) => {
      const element = document.querySelectorAll(`.${name}`)
      let count = 0
      const PDF = new JsPDF('', 'pt', 'a4')
      const pageArr = []
      const opts = {
        scale: 12, // 縮放比例，提高生成圖片清晰度
        useCORS: true, // 允許加載跨域的圖片
        allowTaint: false, // 允許圖片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 檢測(cè)每張圖片已經(jīng)加載完成
        logging: true // 日志開(kāi)關(guān)，發(fā)布的時(shí)候記得改成 false
      }
      for (const index in Array.from(element)) {
        html2Canvas(element[index], opts).then(function(canvas) {
          // a4紙的尺寸[595.28,841.89]，html頁(yè)面生成的canvas在pdf中圖片的寬高
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          const imgWidth = 595.28
          const imgHeight = (592.28 / contentWidth) * contentHeight
          const pageData = canvas.toDataURL('image/jpeg', 1.0)
          // 一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
          const pageHeight = (contentWidth / 592.28) * 841.89
          // 未生成pdf的html頁(yè)面高度
          const leftHeight = contentHeight
          pageArr[index] = { pageData: pageData, pageHeight: pageHeight, leftHeight: leftHeight, imgWidth: imgWidth, imgHeight: imgHeight }
          if (++count === element.length) {
            // 轉(zhuǎn)換完畢，可進(jìn)行下一步處理 pageDataArr
            let counts = 0
            for (const data of pageArr) {
              // 頁(yè)面偏移
              let position = 0
              // 轉(zhuǎn)換完畢，save保存名稱(chēng)后瀏覽器會(huì)自動(dòng)下載
              // 當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
              if (data.leftHeight < data.pageHeight) {
                // addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置
                PDF.addImage(data.pageData, 'JPEG', 0, 0, data.imgWidth, data.imgHeight)
              } else {
                // 超過(guò)一頁(yè)時(shí)，分頁(yè)打?。宽?yè)高度841.89）
                while (data.leftHeight > 0) {
                  PDF.addImage(data.pageData, 'JPEG', 0, position, data.imgWidth, data.imgHeight)
                  data.leftHeight -= data.pageHeight
                  position -= 841.89
                  if (data.leftHeight > 0) {
                    PDF.addPage()
                  }
                }
              }
              if (++counts === pageArr.length) {
                PDF.save(title + '.pdf')
              } else {
                // 未轉(zhuǎn)換到最后一頁(yè)時(shí)，pdf增加一頁(yè)
                PDF.addPage()
              }
            }
          }
        })
      }
    }
  }
}

index.vue中使用導(dǎo)出方法

<template>
  <div>
      <div
       class="pdfDom"
      >
        測(cè)試數(shù)據(jù)
      </div>
       <div
       class="pdfDom"
      >
        測(cè)試數(shù)據(jù)2
      </div>
       <div
       class="pdfDom"
      >
        測(cè)試數(shù)據(jù)3
      </div>
      <el-button type="primary" round style="background: #4849FF" @click="btnClick">導(dǎo)出PDF</el-button>
    </div>
 </template>
 <script>
 import JsPDF from 'jspdf'
 import html2Canvas from 'html2canvas'
 mounted() {
    // 導(dǎo)出pdf
    btnClick() {
     this.$nextTick(() => {
         this.htmlToPdf('pdfDom', '個(gè)人報(bào)告')
     })
    },
  },
 </script>

html2canvas

jspdf

實(shí)現(xiàn)效果

方案三（推薦）

puppeteer(中文翻譯”操縱木偶的人”) 是 Google Chrome 團(tuán)隊(duì)官方的無(wú)界面（Headless）Chrome 工具，它是一個(gè) Node 庫(kù)，提供了一個(gè)高級(jí)的 API 來(lái)控制 DevTools協(xié)議上的無(wú)頭版 Chrome 。也可以配置為使用完整（非無(wú)頭）的 Chrome。

Puppeteer 能做些什么

生成頁(yè)面的截圖和PDF。
抓取SPA并生成預(yù)先呈現(xiàn)的內(nèi)容（即“SSR”）。
從網(wǎng)站抓取你需要的內(nèi)容。
自動(dòng)表單提交，UI測(cè)試，鍵盤(pán)輸入等
創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的JavaScript和瀏覽器功能，直接在最新版本的Chrome中運(yùn)行測(cè)試。
捕獲您的網(wǎng)站的時(shí)間線(xiàn)跟蹤，以幫助診斷性能問(wèn)題。

我們只需關(guān)注并使用生成頁(yè)面的截圖PDF功能

Puppeteer的使用

使用express框架搭建簡(jiǎn)單的node服務(wù)

安裝:

npm i puppeteer 或 yarn add puppeteer

1.單個(gè)頁(yè)面生成

var express = require('express');
var app = express();
// 路由中間件：get請(qǐng)求"/"資源
app.get('/', function (req, res) {
    res.send('Hello11 World!');
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {

    //指定存放pdf的文件夾
    const folder = 'vueDoc'
    fs.mkdir(folder, () => { console.log('文件夾創(chuàng)建成功') })

    //啟動(dòng)無(wú)頭瀏覽器
    const browser = await puppeteer.launch({ headless: true }) //PDF 生成僅在無(wú)界面模式支持, 調(diào)試完記得設(shè)為 true
    const page = await browser.newPage();
    await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默認(rèn)會(huì)等待頁(yè)面load事件觸發(fā)
    //指定生成的pdf文件存放路徑
    await page.pdf({ path: `./vueDoc/guide.pdf` });
    //關(guān)閉頁(yè)面
    page.close()
    //關(guān)閉 chromium
    browser.close();
})()

2.根據(jù)頁(yè)面?zhèn)冗厵谘h(huán)生成多個(gè)頁(yè)面

var express = require('express');
var app = express();
// 路由中間件：get請(qǐng)求"/"資源
app.get('/', function (req, res) {
    res.send('Hello11 World!');
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {

    //指定存放pdf的文件夾
    const folder = 'vueDoc'
    fs.mkdir(folder, () => { console.log('文件夾創(chuàng)建成功') })

    //啟動(dòng)無(wú)頭瀏覽器
    const browser = await puppeteer.launch({ headless: true }) //PDF 生成僅在無(wú)界面模式支持, 調(diào)試完記得設(shè)為 true
    const page = await browser.newPage();
    await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默認(rèn)會(huì)等待頁(yè)面load事件觸發(fā)
    // 1) 已知Vue文檔左側(cè)菜單結(jié)構(gòu)為：.menu-root>li>a
    // 獲取所有一級(jí)鏈接
    const urls = await page.evaluate(() => {
        return new Promise(resolve => {
            const aNodes = $('.menu-root>li>a')
            const urls = aNodes.map(n => {
                return aNodes[n].href
            })
            resolve(urls);
        })
    })

    // 2）遍歷 urls, 逐個(gè)訪(fǎng)問(wèn)并生成 pdf    
    let successUrls = [], failUrls = [] // 用于統(tǒng)計(jì)成功、失敗情況
    for (let i = 17; i < urls.length; i++) {
        const url = urls[i],
            tmp = url.split('/'),
            fileName = tmp[tmp.length - 1].split('.')[0]
        try {
            await page.goto(url); //默認(rèn)會(huì)等待頁(yè)面load事件觸發(fā)
            await page.pdf({ path: `./${folder}/${i}_${fileName}.pdf` }); //指定生成的pdf文件存放路徑
            console.log(`${fileName}.pdf 已生成！`)
            successUrls.push(url)
        } catch {
            //如果頁(yè)面打開(kāi)超時(shí)，會(huì)拋出錯(cuò)誤。為了保證后面的頁(yè)面生成不被影響，這里做一下容錯(cuò)處理。
            failUrls.push(url)
            console.log(`${fileName}.pdf 生成失敗！`)
            continue
        }
    }

    console.log(`PDF生成完畢！成功${successUrls.length}個(gè)，失敗${failUrls.length}個(gè)`)
    console.log(`失敗詳情：${failUrls}`)

    //TODO: 失敗重試

    page.close()
    browser.close();
})()

如果公司不希望使用node部署服務(wù)，可以使用python版puppeteer或者java版puppeteer

jvppeteer-java版puppeteer

pyppeteer-python版puppeteer

實(shí)現(xiàn)效果

總結(jié)

以上三種方式各有利弊，html2+canvas雖然使用簡(jiǎn)單方便但性能較差，用戶(hù)體驗(yàn)較差，需要慢慢調(diào)整，最難受的是生成的是圖片，打開(kāi)緩慢，有卡頓，并且不能復(fù)制文字，服務(wù)端使用puppeteer其實(shí)是目前來(lái)看較為妥當(dāng)?shù)姆桨?，但是需要后端服?wù)支持。

以上就是基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出的詳細(xì)內(nèi)容，更多關(guān)于Vue HTML轉(zhuǎn)PDF的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: