欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2前端導出pdf文件實例demo

 更新時間：2024年09月05日 08:57:38   作者：老頭要上朝  
在Vue應用中,將頁面導出為PDF文件通常涉及到前端技術(shù)的組合,下面這篇文章主要給大家介紹了關(guān)于vue2前端導出pdf文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1、安裝依賴

導出PDF通常涉及將HTML內(nèi)容轉(zhuǎn)換為圖片（截圖），然后將這些圖片插入到PDF文檔中。這個過程可以通過使用 html2canvas 和 jspdf 這兩個庫來實現(xiàn)：

npm install jspdf html2canvas 或 cnpm install jspdf html2canvas

安裝完成后，package.json文件生成如下：

2、demo

2.1 demo1導出效果

源碼中 【導出PDF】導出時，不會分頁導出。

2.2 demo2導出效果

源碼中 【導出PDF2】導出時，會分頁導出。

2.3 demo3導出效果

源碼中 【導出PDF3】導出時，會分頁導出。

3、源碼 

<template>
  <div>
    <div style="margin-top: 50px;text-align: center"  >
      <el-button type="primary" @click="exportPDF">導出PDF</el-button>
      <el-button type="primary" @click="exportPDF2">導出PDF2</el-button>
      <el-button type="primary" @click="getPdf()" >導出PDF3</el-button>
    </div>
    <div style="margin-left: 200px;margin-top: 10px;margin-right: 150px" ref="pdfContent" id="pdfDom"  class="mmm" >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <h1>1Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>2Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>3Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
      <h1>4Element 默認提供一套主題，CSS 命名采用 BEM 的風格，方便使用者覆蓋樣式。</h1>
    </div>
  </div>
</template>

<script>
  import jsPDF from 'jspdf';
  import html2canvas from 'html2canvas';

  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }],
        htmlTitle:"PDF測試"
      }
    },
    methods: {
      async exportPDF() {
        const content = this.$refs.pdfContent;
        const canvas = await html2canvas(content);
        const imgData = canvas.toDataURL('image/png');
        const doc = new jsPDF({
          orientation: 'portrait',
          unit: 'px',
          format: 'a4',
        });
        const imgProps= doc.getImageProperties(imgData);
        const pdfWidth = doc.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        doc.save('導出pdf測試1.pdf');
      },
       exportPDF2() {
        html2canvas(document.querySelector('#pdfDom'), {
            allowTaint: false,        // 是否允許跨域圖像。會污染畫布，導致無法使用canvas.toDataURL 方法
            backgroundColor: '#fff',  // 畫布背景色（如果未在DOM中指定）。設置null為透明
            useCORS: true,            // 是否嘗試使用CORS從服務器加載圖像
            dpi: 500,                 // 導出pdf清晰度
            scale: window.devicePixelRatio, // 用于渲染的比例。默認為瀏覽器設備像素比率。
          }
        ).then(function (canvas) {
            var imageData = canvas.toDataURL('image/jpeg', 1.0); // html生成圖片的數(shù)據(jù)
            const canvasWidth = canvas.width;  // 原本的html頁面的寬高
            const canvasHeight = canvas.height;
            // 當分辨率是72像素/英寸時，A4紙像素長寬分別是842×595
            var a4Width = 595;                                  // A4 寬度
            var a4Height = (595 / canvasWidth) * canvasHeight;  // A4總高度
            let pageHeight = canvasWidth / 595 * 842;           // 生成pdf的一頁顯示html的高度
            let restHeight = canvasHeight;                      // 未生成pdf的html頁面高度，最初是整體的高度
            var position = 0;                                   // 頁面上下偏移的大小
            /**
             * 參數(shù)1：方向：l：橫向  p：縱向
             * 參數(shù)2：單位："pt"、"mm"、"cm"、"m"、"in"、"px"
             * 參數(shù)3：格式：默認為a4
             */
            var pdf = new jsPDF('p', 'pt', 'a4');
            if (restHeight < pageHeight) {                     // 當內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
              /**
               * 將圖像添加到PDF中
               * 參數(shù)1：圖片的url
               * 參數(shù)2：圖片的格式
               * 參數(shù)3：圖片上下偏移的大小
               * 參數(shù)4：原始寬度
               * 參數(shù)5：原始高度
               */
              pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height);
            } else {
              while (restHeight > 0) {
                pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
                restHeight -= pageHeight;
                position -= 842;
                if (restHeight > 0) {
                  pdf.addPage();      // 在PDF文檔中添加新頁面
                }
              }
            }
            pdf.save("導出pdf測試2" + '.pdf')
          }
        )
      },
    },
  };
</script>
<style>
  .mmm {
    background: linear-gradient(to right, #39fad7, #f9faa1,#39fad7); /* 標準的語法 */
  }
</style>

3.1 demo1

源碼中 【導出PDF】按鈕，不會分頁導出，會截斷數(shù)據(jù)，適用于只需要導出一頁的數(shù)據(jù)，如證件、行數(shù)少的表格數(shù)據(jù)等。

3.2 demo2

源碼中 【導出PDF2】按鈕，會分頁導出，實際應用中根據(jù)需求進行處理、設置。

3.3 demo3

源碼中 【導出PDF3】按鈕，會分頁導出，封裝了方法，本質(zhì)和【導出PDF2】按鈕一樣。

<el-button type="primary" @click="getPdf()" >導出PDF3</el-button>

此按鈕為封裝方法，所以當前源碼搜不到。

1)、在utils文件夾中創(chuàng)建htmlToPdf.js的文件，如下：

// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('p', 'pt', 'a4')
          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
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(title + '.pdf')
        }
      )
    }
  }
}

2)、在main.js中注冊自定義的插件htmlToPdf.js

3)、方法、屬性解釋及導出文件 

getPdf()是我們在main.js中綁定在Vue中的，直接調(diào)用即可，無需在methods中寫方法;

htmlTitle:"PDF測試"   //主頁面中定義文件名稱，htmlToPdf.js中獲取。

總結(jié)

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

相關(guān)文章

  • 利用Vue-cli搭建Vue項目框架的教程詳解

    利用Vue-cli搭建Vue項目框架的教程詳解

    這篇文章主要為大家詳細介紹了利用Vue-cli搭建Vue項目框架的相關(guān)資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下
    2023-02-02
  • Vue 實現(xiàn)對quill-editor組件中的工具欄添加title

    Vue 實現(xiàn)對quill-editor組件中的工具欄添加title

    這篇文章主要介紹了Vue 實現(xiàn)對quill-editor組件中的工具欄添加title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue3父子組件傳參有關(guān)sync修飾符的用法詳解

    Vue3父子組件傳參有關(guān)sync修飾符的用法詳解

    這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
    2021-09-09
  • vue引入外部的js文件的10種方法總結(jié)

    vue引入外部的js文件的10種方法總結(jié)

    這篇文章主要為大家詳細介紹了vue項目中引入外部的js文件的10種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以參考下
    2023-08-08
  • Vue3中ref的用法舉例總結(jié)(避免混淆)

    Vue3中ref的用法舉例總結(jié)(避免混淆)

    這篇文章主要給大家介紹了關(guān)于Vue3中ref的用法舉例總結(jié)的相關(guān)資料,ref()接受一個內(nèi)部值,返回一個響應式的可更改的ref對象,此對象只有一個指向其內(nèi)部值的屬性.value,需要的朋友可以參考下
    2023-10-10
  • vant 中van-list的用法說明

    vant 中van-list的用法說明

    這篇文章主要介紹了vant 中van-list的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue3 axios安裝及使用示例詳解

    vue3 axios安裝及使用示例詳解

    這篇文章主要介紹了vue3 axios安裝及使用示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-04-04
  • 基于Vue-cli的一套代碼支持多個項目

    基于Vue-cli的一套代碼支持多個項目

    這篇文章主要介紹了基于Vue-cli的一套代碼支持多個項目的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
    2021-03-03
  • mpvue中使用flyjs全局攔截的實現(xiàn)代碼

    mpvue中使用flyjs全局攔截的實現(xiàn)代碼

    這篇文章主要介紹了mpvue中使用flyjs全局攔截的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Element el-checkbox-group v-model不支持對象(object)解決方案

    Element el-checkbox-group v-model不支持對象(object)解決方案

    本文主要介紹了Element el-checkbox-group v-model不支持對象(object)解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05

最新評論