Vue3導出pdf文件詳細方案

更新時間：2023年08月22日 14:39:43 作者：一只神奇的海螺

這篇文章主要給大家介紹了關于Vue3導出pdf文件的相關資料,最近項目有個需求,將系統(tǒng)統(tǒng)計的數(shù)據(jù)生成分析報告,然后可以導出成PDF,這里給大家總結下,需要的朋友可以參考下

Vue3導出pdf方案

1.引入兩個依賴

npm i html2canvas
npm i jspdf

2.在utils文件夾下新建htmlToPdf.js文件

// 頁面導出為pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
  getPdf(title, loading) {
    // loading = true;
    console.log(loading);
    html2Canvas(document.querySelector('#pdfDom'), {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 4, //將分辨率提高到特定的DPI 提高四倍
      scale: 4, //按比例增加分辨率
    }).then((canvas) => {
      var pdf = new jsPDF('p', 'mm', 'a4'); //A4紙，縱向
      var ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272, //A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區(qū)域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4顯示比例換算一頁圖像的像素高度
        renderedHeight = 0;
      while (renderedHeight < canvas.height) {
        var page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能內容不足一頁
        //用getImageData剪裁指定區(qū)域，并畫到前面創(chuàng)建的canvas對象中
        page
          .getContext('2d')
          .putImageData(
            ctx.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight),
            ),
            0,
            0,
          );
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width),
        ); //添加圖像到頁面，保留10mm邊距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面還有內容，添加一個空頁
        }
        // delete page;
      }
      //保存文件
      pdf.save(title + '.pdf');
      // loading = false;
      console.log(loading);
    });
  },
};
export default htmlToPdf;

擴展：還可以傳多個不同容器id

// 頁面導出為pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
  getPdf(title, id) {
    html2Canvas(
      document.querySelector(id), 
      {
        allowTaint: false,
        taintTest: false,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4, //將分辨率提高到特定的DPI 提高四倍
        scale: 4, //按比例增加分辨率
      }
    ).then((canvas) => {
        var pdf = new jsPDF('p', 'mm', 'a4'); //A4紙，縱向
        var ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272, //A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區(qū)域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4顯示比例換算一頁圖像的像素高度
        renderedHeight = 0;
      while (renderedHeight < canvas.height) {
        var page = document.createElement('canvas');
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能內容不足一頁
        //用getImageData剪裁指定區(qū)域，并畫到前面創(chuàng)建的canvas對象中
        page
          .getContext('2d')
          .putImageData(
            ctx.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight),
            ),
            0,
            0,
          );
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width),
        ); //添加圖像到頁面，保留10mm邊距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage(); //如果后面還有內容，添加一個空頁
        }
        // delete page;
      }
    });
  },
};
export default htmlToPdf;

3.來到需要將vue轉成pdf的頁面

...
<!-- 按鈕 -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">
  轉成pdf
</el-button>
...
<div id="pdfDom">
	<!-- 此處是希望轉成pdf的部分的內容，用一個大div盒子包起來 -->
</div>
<script setup>
// 導入htmlToPdf.js
import htmlToPdf from '../utils/htmlToPdf';
// 可在methods定義
const pdfFunc = () => {   
	 loading.value = true;
	 // 調用htmlToPdf工具函數(shù)
     htmlToPdf.getPdf('文檔名稱');
     // 定時器模擬按鈕loading動畫的時間
      setTimeout(() => {
        loading.value = false;
        ElMessage.success('打印成功!');
      }, 1000);
}
</script>

methods:

    pdfFunc() {
      // 調用htmlToPdf工具函數(shù)
      htmlToPdf.getPdf('文檔名稱');
      // 定時器模擬按鈕loading動畫的時間
      setTimeout(() => {
      }, 1000);
    },

擴展:多個容器不同id

      // 容器id="pdfCompany"
      pdfFunc() {
        this.loadingFlag = true;	// 動畫加載事件
        // 調用htmlToPdf工具函數(shù)
        htmlToPdf.getPdf('中小企業(yè)認定',"#pdfCompany");
        // 定時器模擬按鈕loading動畫的時間
        setTimeout(() => {
          this.loadingFlag = false;
        }, 1000);
      }

jsPdf

介紹一下純jspdf用法，將一個圖片列表導出為pdf文件，根據(jù)圖片寬高計算在pdf中的位置

jsPDF 是一個基于 HTML5 的客戶端解決方案，用于生成各種用途的 PDF 文檔。

官網(wǎng)地址：https://rawgit.com/MrRio/jsPDF/master/docs/

1、安裝：npm install jspdf

2、引入：import jsPDF from “jspdf”

3、使用：

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);

第一個參數(shù)： l：橫向 p：縱向

第二個參數(shù)：測量單位（“pt”，“mm”, “cm”, “m”, “in” or “px”）

第三個參數(shù)：可以是下面格式，默認為“a4”

a0 - a10
b0 - b10
c0 - c10
dl
letter
government-letter
legal
junior-legal
ledger
tabloid
credit-card

默認為“a4”。如果您想使用自己的格式，只需將大小作為數(shù)字數(shù)組傳遞，例如[595.28, 841.89];

*刪除某頁pdf：*

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

*保存pdf文檔：*

 pdf.save(`測試.pdf`);

Example：

1、導出一整頁pdf文件，根據(jù)圖片高度動態(tài)設置pdf的位置，*根據(jù)自己的數(shù)據(jù)格式組裝導出方法*

/**
   * 導出PDF一頁 PDF中的頁面寬度或高度不能超過14400個userUnit。jsPDF將寬度/高度限制為14400
   * @param pageList
   */
  const exportPdf = (pageList: any) => {
    let [imgX, imgY] = [595.28, 841.89]; // a4紙尺寸[595.28, 841.89];
    var pdfX = imgX
    var pdfY = getLength(pageList);
    let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l：橫向  p：縱向
    let isAddpage = 0;
    for (let [index, item] of pageList.entries()) {
      for (let j = 0; j < item.imageList.length; j++) {
        const image = item.imageList[j];
        let imgHeight = imgX / (image.width / image.height);
        pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight);
        isAddpage += imgHeight;
      }
    }
    pdf.save(`全部教材_${getTime()}.pdf`);
  }

2、分頁導出

  const exportPdf = (pageList: any) => {
    let [imgX, imgY] = [595.28, 841.89];
    let pdf = new jsPDF('p', 'pt', 'a4');
    for (let [index, item] of pageList.entries()) {
      for (let j = 0; j < item.imageList.length; j++) {
        const image = item.imageList[j];
        let imgHeight = imgX / (image.width / image.height); //根據(jù)寬度計算高度
        pdf.addImage(image.data, 'JPEG', 0, 0, imgX, imgHeight);
        pdf.addPage();
      }
    }
    let targetPage = pdf.internal.getNumberOfPages();
    pdf.deletePage(targetPage); // 刪除最后一頁
    pdf.save(`測試.pdf`);
  }

總結

到此這篇關于Vue3導出pdf文件的文章就介紹到這了,更多相關Vue3導出pdf內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

圖文詳解Vue3沒有代碼提示問題的解決辦法
最近在使用Vue.js時候沒有自動提示,就很難受,下面這篇文章主要給大家介紹了關于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-01-01
vue實現(xiàn)滑動解鎖功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動解鎖功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue中v-model的使用示例詳解
v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關綁定的data屬性,也會在更新data綁定屬性時候,更新頁面上輸入控件的值,這篇文章主要介紹了Vue之v-model的使用,需要的朋友可以參考下
2025-04-04
關于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關于配置babel-plugin-import報錯的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue3+TS實現(xiàn)動態(tài)路由權限的示例詳解
當我們在開發(fā)一個大型的前端應用時,動態(tài)路由權限是一個必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實現(xiàn)動態(tài)路由權限,希望對大家有所幫助
2024-01-01
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值?,需要的朋友可以參考下
2022-10-10
Vue2幾種常見開局方式詳解
這篇文章主要為大家詳細介紹了Vue2幾種常見開局方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
vue2 v-model/v-text 中使用過濾器的方法示例
這篇文章主要介紹了vue2 v-model/v-text 中使用過濾器的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
在Vue3+Vite項目中開啟Gzip壓縮過程
這篇文章主要介紹了在Vue3+Vite項目中開啟Gzip壓縮過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-10-10
vue.js 底部導航欄一級路由顯示子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導航欄一級路由顯示子路由不顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03