vue3移動端嵌入pdf的多種方法小結

更新時間：2023年10月25日 15:53:55 作者：朱@

這篇文章主要介紹了vue3移動端嵌入pdf的多種方法小結,使用embed嵌入有好處也有缺點,本文給大家講解的非常詳細,需要的朋友可以參考下

1.使用embed嵌入

好處：簡單，代碼量少，功能齊全
缺點：有固定樣式，難以修改，不可定制

<embed class="embedPdf" 
:src="pdfurl" 
type="application/pdf">

2.使用vue-pdf-embed（pdf預覽）的形式定制嵌入pdf

優(yōu)點：除了pdf的內容別的都可以修改，可以定制樣式
缺點：要自己手寫下載，下一頁，上一頁等功能
使用vue-pdf-embed插件展示預覽pdf（這里只能展示一頁，或者不分頁全部展示，就會是一長條，所以我們自己做分頁。

<div class="vuePdfEmbed">
        <VuePdfEmbed
          :source="state.source"
          :style="scaleFun"
          class="vue-pdf-embed"
          :page="state.pageNum"
          width="700"
        />
        <div class="page-tool">
          <div class="page-tool-item" @click="lastPage">上一頁</div>
          <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
          <div class="page-tool-item" @click="nextPage">下一頁</div>
          <div class="page-tool-item" @click="downloadPDF">下載</div>
        </div>
    </div>

分頁的邏輯是使用vue3-pdfjs中的createLoadingTask函數(shù)獲取pdf的總頁數(shù)，這個函數(shù)是一個異步函數(shù)，之后會返回pdf的信息（別的信息基本沒用，只有numPages比較有用。）

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 獲得總頁數(shù)

const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //預覽pdf文件地址
  pageNum: 1, //當前頁面
  scale: 1, // 縮放比例
  numPages: 0, // 總頁數(shù)
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})

// 獲取上一頁
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}

// 獲取下一頁
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}

// 下載pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下載文件重命名
          a.click();
          a.remove();
        });
      });
}

onMounted(() => {
  // 加載異步任務
  const loadingTask = createLoadingTask(state.source);
  // 載入pdf后獲取頁數(shù)
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

分頁的邏輯是使用vue3-pdfjs中的createLoadingTask函數(shù)獲取pdf的總頁數(shù)，這個函數(shù)是一個異步函數(shù)，之后會返回pdf的信息（別的信息基本沒用，只有numPages比較有用。）

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 獲得總頁數(shù)
const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //預覽pdf文件地址
  pageNum: 1, //當前頁面
  scale: 1, // 縮放比例
  numPages: 0, // 總頁數(shù)
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})
// 獲取上一頁
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}
// 獲取下一頁
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}
// 下載pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下載文件重命名
          a.click();
          a.remove();
        });
      });
}
onMounted(() => {
  // 加載異步任務
  const loadingTask = createLoadingTask(state.source);
  // 載入pdf后獲取頁數(shù)
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

.vuePdfEmbed{
  flex: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.vuePdfEmbed{
  .page-tool {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    width: 320px;
    align-items: center;
    margin: auto;
    justify-content: space-around;
  }
  .page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
  }
}

到此這篇關于vue3移動端嵌入pdf的兩種辦法的文章就介紹到這了,更多相關vue3移動端嵌入pdf內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: