快捷導(dǎo)航

Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF方法流程詳解

更新時(shí)間：2022年08月18日 15:27:10 作者：前端-阿來(lái)

在日常的工作中，有時(shí)候會(huì)碰到需要將某個(gè)網(wǎng)址網(wǎng)頁(yè)保存成為pdf的情況，這篇文章主要介紹了用Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求背景

我們平臺(tái)在發(fā)貨的時(shí)候需要打一張發(fā)貨單，這張發(fā)貨單上面需要顯示客戶的收貨地址、發(fā)貨地址、商品的特征信息和庫(kù)存，以及訂單金額等等內(nèi)容。

功能要求

要求在頁(yè)面中的訂單詳情頁(yè)面點(diǎn)擊某一個(gè)按鈕，然后下載一個(gè)寫好樣式的PDF。

功能實(shí)現(xiàn)過程

window.print()方法

使用這個(gè)方法可以調(diào)起瀏覽器自帶的打印方法，這個(gè)方法比較省事，直接寫一個(gè)方法，然后綁定給按鈕就完事。還能預(yù)覽和選擇打印的紙張大小簡(jiǎn)直yyds。但是不能高興的太早，這樣會(huì)將瀏覽器的整個(gè)內(nèi)容都打印下來(lái)。作為發(fā)貨使用肯定是不合適的，我們?cè)诰W(wǎng)購(gòu)時(shí)收到的發(fā)貨單也沒有帶著頁(yè)面菜單和頁(yè)腳的，所以這個(gè)方案行不通。

function print(){
	window.print();
}

使用html2canvas+jspdf實(shí)現(xiàn)

既然是第三方的庫(kù)還是要免不了的要安裝，安裝使用如下語(yǔ)句：

npm i --save html2canvas jspdf

操作方法是首先使用html2canvas將頁(yè)面中選定的元素轉(zhuǎn)換成圖片，然后將圖片插入到pdf中，接著再下載下來(lái)。

使用import導(dǎo)入到項(xiàng)目中以后就能直接使用了。

在這里使用

    print(orderNo) {
      // 當(dāng)下載pdf時(shí)，若不在頁(yè)面頂部會(huì)造成PDF樣式不對(duì),所以先回到頁(yè)面頂部再下載
      let top = this.$refs.wrap;
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      html2canvas(this.$refs.wrap, {
        allowTaint: true,
      }).then(function (canvas) {
        const pageData = canvas.toDataURL("image/jpeg", 1.0);
        //p表示縱向，l表示橫向，px是單位 ,[寬，長(zhǎng)]->[x,y]
        const PDF = new JsPdf("p", "px", [2550, 3100]);
        PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);
        PDF.save(orderNo + ".pdf");
      });
    },

需要注意的是這里的尺寸，因?yàn)槲覀兂叽缫呀?jīng)定死了。所以我這里就直接寫死，JsPdf這個(gè)構(gòu)造函數(shù)默認(rèn)使用的尺寸是A4的，打印多頁(yè)的時(shí)候還要計(jì)算高度，分頁(yè)，這些可以參考下面的代碼

    print(orderNo) {
      // 當(dāng)下載pdf時(shí)，若不在頁(yè)面頂部會(huì)造成PDF樣式不對(duì),所以先回到頁(yè)面頂部再下載
      let top = this.$refs.wrap;
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      html2canvas(this.$refs.wrap, {
        allowTaint: true,
      }).then(function (canvas) {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        //一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
        let 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中圖片的寬高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        const 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();
            }
          }
        }
        // const pageData = canvas.toDataURL("image/jpeg", 1.0);
        // //p表示縱向，l表示橫向，px是單位 ,[寬，長(zhǎng)]->[x,y]
        // const PDF = new JsPdf("p", "px", [2550, 3100]);
        // PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);
        PDF.save(orderNo + ".pdf");
      });
    },

HTML：

只需要在warp中寫好要相應(yīng)的模版，然后先請(qǐng)求相關(guān)數(shù)據(jù)渲染。之后調(diào)用上面的print打印內(nèi)容。

然后將內(nèi)容進(jìn)行隱藏，編寫css代碼：

.print {
  position: fixed;
  background-color: #fff;
  height: 0px;
  // width: 0px;
  overflow: hidden;
  .header {
    padding: 20px;
    text-align: right;
  }
  .wrap {
    // display: none;
    padding: 186px 107px 114px 107px;
    // overflow: scroll;
  }
  .slip {
    display: flex;
    flex-direction: column;
    padding: 81px;
    border: 2px solid #000000;
    position: relative;
    width: 2336px;
    height: 3000px;
    .title {
      display: block;
      padding: 0px 20px;
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      font-style: normal;
      font-weight: 600;
      font-size: 112px;
      line-height: 131px;
      color: #000000;
      background-color: #fff;
    }
   }
  }

將將父盒子的height設(shè)置為零，overflow設(shè)置為hidden，然后在講內(nèi)容提取到一個(gè)vue文件當(dāng)中，父組件中應(yīng)用這個(gè)打印組件，并綁定一個(gè)ref，在父父組件中使用this.$refs.xxx.print()來(lái)打印，當(dāng)點(diǎn)擊打印按鈕的時(shí)候，只需要調(diào)用這個(gè)方法，如果需要從服務(wù)端獲取數(shù)據(jù)，就需要先執(zhí)行請(qǐng)求數(shù)據(jù)的操作，然后再掉用打印數(shù)據(jù)的操作。

如下所示：

調(diào)用：還可以傳遞參數(shù)，這里我傳遞了訂單號(hào)，首先會(huì)先通過訂單號(hào)請(qǐng)求相關(guān)的數(shù)據(jù)，然后打印內(nèi)容。

到此這篇關(guān)于Vue實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)PDF方法流程詳解的文章就介紹到這了,更多相關(guān)Vue網(wǎng)頁(yè)轉(zhuǎn)PDF內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: