1. 前言

1. 雖然我自己找工作的時(shí)候沒有問到此問題,但是有些道友私下wei我了,每次解釋比較麻煩,還是單獨(dú)寫篇文章吧
2. 誰讓前端啥都能干呢

2. 準(zhǔn)備工作

1. 主要框架vue3
2. pdf第三方庫:PDF.js 是一個(gè)開源的 JavaScript 庫辉饱，可以在網(wǎng)頁上直接加載和渲染 PDF 文件洁桌。
   3.通過引入 PDF.js 庫并使用其提供的 API巧还，在 Vue 組件中實(shí)現(xiàn) PDF 的預(yù)覽功能
3. 安裝依賴 注意 依賴名字

npm install pdfjs-dist

3. vue組件 ---預(yù)覽

<template>
  <div>
    <div ref="pdfContainer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as pdfjs from 'pdfjs-dist/build/pdf';

const pdfUrl = '/path/to/pdf.pdf';

const pdfContainer = ref(null);

onMounted(() => {
  const pdfViewer = new pdfjs.PDFViewer({
    container: pdfContainer.value,
  });

  pdfjs.getDocument(pdfUrl).promise.then((pdf) => {
    pdfViewer.setDocument(pdf);
  });
});
</script>

1. 使用了pdfjs-dist庫來加載和渲染 PDF 文件。
   2.在 onMounted 鉤子中蜕猫，我們創(chuàng)建了一個(gè) PDFViewer 實(shí)例
   3.并將 PDF 文件渲染到指定的容器中

4. 這只寫了 PDF 文件的預(yù)覽功能，你還可以根據(jù)需要對預(yù)覽界面進(jìn)行進(jìn)一步的樣式和交互優(yōu)化。同時(shí)傻工，確保將實(shí)際的 PDF 文件路徑（pdfUrl）替換為你自己的路徑

4. iframe 實(shí)現(xiàn)預(yù)覽

1. 使用 iframe 元素加載 PDF 文件。通過將 PDF 文件的 URL 設(shè)置為iframe 的src 屬性，可以在網(wǎng)頁上嵌入 PDF 文件并實(shí)現(xiàn)預(yù)覽功能中捆。
2. 相關(guān)代碼

<template>
  <div>
    <iframe ref="pdfViewer" :src="pdfUrl"></iframe>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const pdfUrl = '/path/to/pdf.pdf';

const pdfViewer = ref(null);
</script>

<style scoped>
iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

1. 使用 ref 來引用 iframe 元素鸯匹，并將 PDF 文件的 URL 綁定到 iframe 的 src 屬性上。
2. 這樣就可以在頁面中嵌入 PDF 文件并實(shí)現(xiàn)預(yù)覽功能泄伪。你可以根據(jù)需要調(diào)整 iframe 的樣式和大小殴蓬。

• 使用 iframe 預(yù)覽 PDF 文件可能受到瀏覽器安全策略的限制，具體行為可能因?yàn)g覽器而異蟋滴。

5. 下載功能實(shí)現(xiàn)

• 前端下載其實(shí)都很方便的

使用 <a> 標(biāo)簽

1. 最簡單的方式是使用 <a>標(biāo)簽來創(chuàng)建一個(gè)下載鏈接染厅，
2. 將 PDF 文件的 URL 設(shè)置為該鏈接的 href 屬性。
3. 用戶點(diǎn)擊鏈接時(shí)津函，瀏覽器會(huì)自動(dòng)下載 PDF 文件

<template>
  <div>
    <a :href="pdfUrl" download="filename.pdf">下載PDF</a>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const pdfUrl = '/path/to/pdf.pdf';
</script>

1. 使用 <a> 標(biāo)簽創(chuàng)建一個(gè)下載鏈接肖粮，并將 PDF文件的 URL綁定到 href 屬性上。
2. 通過設(shè)置 download 屬性尔苦，可以指定下載的文件名涩馆。
3. 用戶點(diǎn)擊鏈接時(shí)，瀏覽器會(huì)自動(dòng)下載指定的 PDF 文件允坚。

• 確保將實(shí)際的 PDF 文件路徑（pdfUrl）替換為你自己的路徑魂那，并根據(jù)需要自定義下載鏈接的樣式。

使用 JavaScript 下載

1. 如果你需要在用戶執(zhí)行某個(gè)操作后觸發(fā) PDF 文件的下載稠项，可以使用 JavaScript 來實(shí)現(xiàn)文件下載功能涯雅。
2. 這可以通過創(chuàng)建臨時(shí)的Blob對象和使用 URL.createObjectURL()方法來實(shí)現(xiàn)

<template>
  <div>
    <button @click="downloadPdf">下載PDF</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const pdfUrl = '/path/to/pdf.pdf';

const downloadPdf = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', pdfUrl, true);
  xhr.responseType = 'blob';

  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = new Blob([xhr.response], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = 'filename.pdf';
      link.click();

      URL.revokeObjectURL(url);
    }
  };

  xhr.send();
};
</script>

1. 定義了 downloadPdf方法，在用戶點(diǎn)擊按鈕時(shí)觸發(fā)該方法皿渗。
2. 方法內(nèi)部使用 XMLHttpRequest對象進(jìn)行異步請求斩芭，獲取 PDF 文件的 Blob 數(shù)據(jù)。
3. 然后乐疆，通過創(chuàng)建 <a> 標(biāo)簽划乖，將 Blob對象的 URL 設(shè)置為鏈接的 href 屬性，
4. 再使用click()方法模擬點(diǎn)擊下載挤土。

請注意琴庵，將實(shí)際的 PDF 文件路徑（pdfUrl）替換為你自己的路徑，并根據(jù)需要自定義觸發(fā)下載操作的方式和樣式仰美。

6. 服務(wù)端下載

1. 前端通過調(diào)用后端接口來實(shí)現(xiàn)下載也是常用的方式

參考資料

初心

我所有的文章都只是基于入門迷殿，初步的了解；是自己的知識體系梳理,如有錯(cuò)誤,道友們一起溝通交流;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉