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 文件渲染到指定的容器中
2. 这只写了 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. 前端通过调用后端接口来实现下载也是常用的方式

参考资料

初心

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

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

共勉