1. 前言

1. 虽然我自己找工作的时候没有问到此问题,但是有些道友私下wei我了,每次解释比较麻烦,还是单独写篇文章吧
2. 谁让前端啥都能干呢

---

2. 准备工作

1. 主要框架vue3
2. pdf第三方库:PDF.js 是一个开源的 JavaScript 库，可以在网页上直接加载和渲染 PDF 文件。
   3.通过引入 PDF.js 库并使用其提供的 API，在 Vue 组件中实现 PDF 的预览功能
3. 安装依赖 注意 依赖名字

npm install pdfjs-dist

---

3. vue组件 ---预览

<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 钩子中，我们创建了一个 PDFViewer 实例
   3.并将 PDF 文件渲染到指定的容器中

4. 这只写了 PDF 文件的预览功能，你还可以根据需要对预览界面进行进一步的样式和交互优化。同时，确保将实际的 PDF 文件路径（pdfUrl）替换为你自己的路径

---

4. iframe 实现预览

1. 使用 iframe 元素加载 PDF 文件。通过将 PDF 文件的 URL 设置为iframe 的src 属性，可以在网页上嵌入 PDF 文件并实现预览功能。
2. 相关代码

<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 文件并实现预览功能。你可以根据需要调整 iframe 的样式和大小。

• 使用 iframe 预览 PDF 文件可能受到浏览器安全策略的限制，具体行为可能因浏览器而异。

---

---

5. 下载功能实现

• 前端下载其实都很方便的

使用 <a> 标签

1. 最简单的方式是使用 <a>标签来创建一个下载链接，
2. 将 PDF 文件的 URL 设置为该链接的 href 属性。
3. 用户点击链接时，浏览器会自动下载 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> 标签创建一个下载链接，并将 PDF文件的 URL绑定到 href 属性上。
2. 通过设置 download 属性，可以指定下载的文件名。
3. 用户点击链接时，浏览器会自动下载指定的 PDF 文件。

• 确保将实际的 PDF 文件路径（pdfUrl）替换为你自己的路径，并根据需要自定义下载链接的样式。

---

使用 JavaScript 下载

1. 如果你需要在用户执行某个操作后触发 PDF 文件的下载，可以使用 JavaScript 来实现文件下载功能。
2. 这可以通过创建临时的Blob对象和使用 URL.createObjectURL()方法来实现

<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方法，在用户点击按钮时触发该方法。
2. 方法内部使用 XMLHttpRequest对象进行异步请求，获取 PDF 文件的 Blob 数据。
3. 然后，通过创建 <a> 标签，将 Blob对象的 URL 设置为链接的 href 属性，
4. 再使用click()方法模拟点击下载。

请注意，将实际的 PDF 文件路径（pdfUrl）替换为你自己的路径，并根据需要自定义触发下载操作的方式和样式。

---

6. 服务端下载

1. 前端通过调用后端接口来实现下载也是常用的方式

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉