Vue3前端多种方式超简单预览PDF文件一文搞定(内附源码示例自取)
目录介绍
安装情况
预览pdf
当地文件预览
在线路径预览
下载文件路径预览
学习源码
介绍
在前端vue中偶然会碰到需要举行预览pdf的场景,前段时间我一位前端朋友就有碰到这个问题,也和我举行了一些探讨
此中预览pdf场景重要会有三种情况:
当地文件,pdf在线预览路径,pdf下载路径三种,此中前面两种还比较常见,但是第三种的pdf下载路径举行预览这种场景还是不是太多的,由于他们后端给返回的路径就是一个下载路径,路径放到浏览器里面会直接举行下载pdf
下面将会以vue3为例来举行预览pdf的演示
安装情况
vue3
第三方包组件
npm install vue-pdf-embed@^1.1.6
npm install vue3-pdfjs@^0.1.6 预览pdf
重要组件代码如下
https://i-blog.csdnimg.cn/direct/f2d3d5f2108e4ea9a9796b5d33a8cc2d.png
当地文件预览
首先第一种情况,直接把pdf文件放入项目目录中举行预览
https://i-blog.csdnimg.cn/direct/d9a7351b522c456cb681af677fba288d.png启动检察效果
https://i-blog.csdnimg.cn/direct/cbf0f824ca394a1880dfd9c08af5f91b.png
预览乐成
在线路径预览
比较常见的就是一个可以直接拿来预览的路径,比如下面的路径:
http://static.shanhuxueyuan.com/test.pdf
https://i-blog.csdnimg.cn/direct/ca794e66b71b4b52bc69f8fa7e3d317e.png
誊写预览代码
https://i-blog.csdnimg.cn/direct/009eb05f0d094cfda5d3a07c3ea17b45.png
https://i-blog.csdnimg.cn/direct/5113fb91a9af4406b2f9496f42cbe9cd.png 预览乐成
固然也可以使用体系自带的iframe举行预览
https://i-blog.csdnimg.cn/direct/cedf75134ccf4bb694c1087f3eef0109.png
检察预览效果
https://i-blog.csdnimg.cn/direct/81d669609bb24283a96d83575e682f8a.png 预览样式有些丑需要自己举行誊写样式,固然当地文件那种也可以使用iframe举行预览,可以自己实验下
下载文件路径预览
少少数情况下拿到的是一个直接下载的路径,此时前端不想举行下载想直接对该路径举行预览,固然前面的组件也完全可以兼容这种写法
首先后端准备提供一个下载文件的接口路径
@GetMapping("/downloadPdf")
public ResponseEntity<StreamingResponseBody> downloadPdf() {
// 指定本地 PDF 文件的路径
String filePath = "C:\\var\\示例2.pdf";
File file = new File(filePath);
// 检查文件是否存在
if (!file.exists()) {
return ResponseEntity.notFound().build();
}
// 设置响应头
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=test.pdf");
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
// 返回 StreamingResponseBody
StreamingResponseBody body = outputStream -> {
try (FileInputStream fis = new FileInputStream(file)) {
byte[] buffer = new byte;
int bytesRead;
while ((bytesRead = fis.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
} catch (IOException e) {
e.printStackTrace();
}
};
return ResponseEntity.ok()
.headers(headers)
.contentLength(file.length())
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.body(body);
} https://i-blog.csdnimg.cn/direct/46ec8ce6bcb9474bae537e6c863dda6f.png
服务启动后将接口路径直接放入到浏览器中回车验证是否直接举行文件的下载
https://i-blog.csdnimg.cn/direct/0cd9a3b8491241669fc7dce689708d6e.png下载乐成表现该路径就是一个直接下载的路径
https://i-blog.csdnimg.cn/direct/7cb0d5fa821f43fa8fad5f0840aee580.png
检察预览效果:
https://i-blog.csdnimg.cn/direct/5db301e27eb3445e89c68d54477e6fc2.png
预览乐成
但是此时嵌套一样平常的iframe组件就不行了
https://i-blog.csdnimg.cn/direct/ca58e887514b49a8b1d186f1fbc828ab.png
检察预览
https://i-blog.csdnimg.cn/direct/bed7d3e6062548588b5178d0c384ca02.png
预览失败,浏览器直接下载文件了
学习源码
vue3预览pdf示例源码
提取码: nuq6
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]