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

vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)

 更新時(shí)間：2023年03月27日 09:20:52   作者：yehaocheng520  
這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-pdf插件的使用

使用vue-pdf插件實(shí)現(xiàn)如下效果圖：

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

  • 1.多個(gè)pdf預(yù)覽
  • 2.獲取頁(yè)碼，每個(gè)pdf文檔實(shí)現(xiàn)分頁(yè)預(yù)覽功能

實(shí)現(xiàn)步驟如下：

1.npm安裝

在根目錄下輸入一下命令：

npm i pdfjs-dist@2.5.207 --save
npm i vue-pdf@4.2.0 --save

2.全局注冊(cè)或者局部注冊(cè)(我這邊是局部注冊(cè))——封裝一個(gè)pdf預(yù)覽組件

2.1 template組件內(nèi)容如下：

<template>
  <div class="pdf-preview">
    <div class="head">
      <div>
        <el-button @click="last" class="mr10" :disabled="Num == 0">
          上一個(gè)</el-button
        >
        <el-button @click="next" class="mr10" :disabled="Num == url.length - 1">
          下一個(gè)</el-button
        >
        <span class="page">{{ Numnow }}/{{ NumA }}</span>
      </div>
      <div class="fenye">
        <el-button @click="downPDF" class="mr10 down">下載</el-button>
      </div>
    </div>
    <pdf
      ref="pdf"
      :src="src"
      :page="pageNum"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum = $event"
      @error="pdfError($event)"
      @link-clicked="page = $event"
    >
    </pdf>
    <div class="tools">
      <div class="fenye">
        <el-button @click="prePage" class="mr10"> 上一頁(yè)</el-button>
        <el-button @click="nextPage" class="mr10"> 下一頁(yè)</el-button>
        <span class="page">{{ pageNum }}/{{ pageTotalNum }}</span>
      </div>
    </div>
  </div>
</template>

2.2 js內(nèi)容如下：

<script>
import pdf from 'vue-pdf';
export default {
  name: 'pdfPreview',
  props: {
    url: {
      default: '',
      type: Array,
    },
  },
  components: {
    pdf,
  },
  data() {
    return {
      src: '', // 預(yù)覽地址
      pageNum: 1, // 當(dāng)前頁(yè)碼
      pageTotalNum: 1, // 總頁(yè)數(shù)
      Num: 0,
      NumA: 0, //總個(gè)數(shù)
      Numnow: 1, //當(dāng)前個(gè)數(shù)
      vuePdf: null,
    };
  },
  mounted() {
    // 有時(shí)PDF文件地址會(huì)出現(xiàn)跨域的情況,這里最好處理一下
    this.$nextTick(() => {
      this.NumA = this.url.length;
      var url = this.url[this.Num].fileSrc;
      this.src = pdf.createLoadingTask(url);
    });
  },
  methods: {
    last() {
      this.Numnow--;
      this.Num--;
      var url = this.url[this.Num].fileSrc;
      this.src = pdf.createLoadingTask(url);
    },
    next() {
      this.Numnow++;
      this.Num++;
      var url = this.url[this.Num].fileSrc;
      this.src = pdf.createLoadingTask(url);
    },
    // 上一頁(yè)函數(shù)，
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一頁(yè)函數(shù)
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 頁(yè)面加載回調(diào)函數(shù)，其中e為當(dāng)前頁(yè)數(shù)
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 拋出錯(cuò)誤的回調(diào)函數(shù)。
    pdfError(error) {
      console.error(error);
    },
    downPDF() {
      // 下載 pdf
      var url = this.url[this.Num].fileSrc;
      var tempLink = document.createElement('a');
      tempLink.style.display = 'none';
      // tempLink.href = url;
      window.open(url);
      tempLink.setAttribute('download', 'XXX.pdf');
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank');
      }
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    },
  },
};
</script>

2.3 css內(nèi)容如下：

<style lang="scss" scoped>
.pdf-preview {
  .head {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .tools {
    display: flex;
    justify-content: space-between;

    .fenye {
      margin-top: 20px;
    }
  }
  .page {
    margin-left: 10px;
  }
}
</style>

3.pdf預(yù)覽組件的使用

3.1 引入pdf預(yù)覽組件

import PdfPreview from '@/components/PdfPreview';//路徑根據(jù)實(shí)際情況調(diào)整

3.2 注冊(cè)組件

components: {PdfPreview}

3.3 組件的使用

<PdfPreview :url="specificationFiles"></PdfPreview>

上面中的url的參數(shù)內(nèi)容如下：

specificationFiles:[
{fileName:'產(chǎn)品手冊(cè)1',fileSrc:'xxxx'},
{fileName:'產(chǎn)品手冊(cè)2',fileSrc:'xxxx'},
]

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論