前端根据文件url路径判断文件预览或者下载以及自定义

本文介绍了如何通过发送HTTP请求获取文件类型,以便决定是预览还是下载。通过检查响应头的Content-Type,实现对不同文件类型的智能处理,如PDF预览、ZIP下载和图片弹窗显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:

点击不同附件浏览器查看效果不同,比如附近类型为pdf,则打开一个新的tab页在线预览,如果是zip包等,则直接下载,如果是image,则弹窗展示当前图片
在这里插入图片描述

如下图,服务端一般会把文件放在一个云服务上,我们无法根据当前地址判断出该文件类型

在这里插入图片描述

我们可以创造一个http请求当前地址,那么response header则会返回当前的文件类型,我们可以根据当前的文件类型再做不同的操作

代码实现

/**
 * 文件下载 或者预览
 * @param url 
 * @param fileName 
 * @param previewTypes  需要预览的文件类型  默认所有类型都是下载  请确保传入正确的MIME 类型或者MIME类型的的主要字段 比如 image/png可传入image
 * @param customTypes  需要自定义的文件类型 会返回当前文件类型  请确保传入正确的MIME 类型
 */
export const downloadOrPreviewFile = (url: string, fileName: string, previewTypes: string[] = [], customTypes: string[] = []): Promise<string> => {
   
   
  return 
### 如何在 Vue 的富文本编辑器中实现文件流的预览下载功能 要在 Vue 中通过富文本编辑器实现文件流的预览下载功能,可以按照以下方式设计解决方案: #### 1. **文件上传至富文本编辑器** 为了支持 PDF 或其他类型的文件上传到富文本编辑器中,可以通过自定义插件或事件监听来处理文件上传逻辑。以下是基于 TinyMCE 和 Quill 编辑器的具体实现。 ##### 使用 TinyMCE 实现文件上传 TinyMCE 提供了一个 `file_picker_callback` 属性用于处理文件选择和上传逻辑[^5]。当用户点击插入文件按钮时,触发该回调函数完成文件上传返回 URL 地址以便嵌入到编辑器内容中。 ```javascript import tinymce from '@tinymce/tinymce-vue'; export default { components: { Editor: tinymce }, data() { return { editorContent: '', editorInitOptions: { file_picker_types: 'file image media', file_picker_callback: (callback, value, meta) => { const input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'application/pdf'); // 只允许PDF文件 input.onchange = () => { const file = input.files[0]; if (!file) return; const formData = new FormData(); formData.append('file', file); fetch('http://your-upload-endpoint.com/upload', { method: 'POST', body: formData, }) .then((response) => response.json()) .then((result) => callback(result.url)) // 返回文件URL给编辑器 .catch(() => alert('Upload failed')); }; input.click(); } } }; } }; ``` ##### 使用 Quill 实现文件上传 对于 Quill 编辑器,则需重写其图片或其他媒体插入行为以适应文件上传需求[^4]。 ```javascript methods: { handleFileInsert(file) { let formData = new FormData(); formData.append('file', file); this.$axios.post('/upload', formData).then(response => { const range = this.quill.getSelection(true); if (range !== null && typeof(range.index) === 'number') { this.quill.insertEmbed(range.index, 'image', `${this.fastDfsUrl}${response.data}`); } else { console.error("Selection not found"); } }).catch(error => { console.error("Error uploading", error); }); } } ``` #### 2. **文件预览** 针对不同浏览器环境下的兼容性考虑,通常会采用如下两种策略之一来进行文件流在线预览: - 利用 `<iframe>` 标签加载目标资源; - 借助第三方库如 pdf.js 来解析渲染 PDF 文档。 示例代码展示如何利用 iframe 显示远程存储服务上的 PDF 文件链接作为附件形式附加于文章正文部分之后显示出来[^2]: ```html <template> <div> <!-- 正文 --> <div class="content">{{ content }}</div> <!-- 如果存在附件则显示 --> <a v-if="attachmentLink" target="_blank" :href="attachmentLink">查看附件</a> <!-- 预览区域 --> <iframe v-if="isPdfPreviewVisible" width="100%" height="600px" frameborder="no" :src="previewSrc"></iframe> </div> </template> <script> export default { props: ['content'], computed: { attachmentLink() { // 解析 HTML 字符串中的 a 标记 href 属性获取实际文件路径 const parser = new DOMParser().parseFromString(this.content, "text/html"); const links = Array.from(parser.querySelectorAll('a')).filter(a => /\.pdf$/.test(a.href)); return links.length ? links[0].href : ''; }, isPdfPreviewVisible() { return !!this.attachmentLink; }, previewSrc() { return `/api/proxy?url=${encodeURIComponent(this.attachmentLink)}&token=YOUR_ACCESS_TOKEN`; } } }; </script> ``` 这里假设后端提供了一种代理接口 `/api/proxy` 负责转发请求同时附带认证令牌确保安全性[^3]。 #### 3. **文件下载** 最后关于文件下载方面,只需简单设置 HTTP 头部 Content-Disposition 参数指示客户端保存而非打开即可[^1]。 后台 PHP 示例: ```php <?php header('Content-Type: application/octet-stream'); header("Content-Disposition: attachment; filename=\"".basename($filePath)."\""); readfile($filePath); exit; ?> ``` 前端调用此 API 即可触发动态生成的内容导出流程。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胡萝卜大王驾到

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值