Vue项目实现在线预览文件【超实用】

Vue项目实现在线预览文件

假设有一个Vue组件，需要显示一个文件的链接，并提供文件预览功能。可以按照以下步骤来使用该过滤器：

1. 在main.js中引入定义过滤器的文件，例如：

import '@/utils/filter';

2. 在模板中使用<a>标签来显示文件链接，并使用管道符(|)来应用showPreviewUrl过滤器，例如：

<!-- 情况1：直接传递文件的地址 -->
<a :href="fileUrl | showPreviewUrl">{
   
   { fileName }}</a>

<!-- 情况2：传递该文件的所有对象 -->
<a target="_blank" :href="item | showPreviewUrl">{
   
   {item.fullName}}</a>

其中，fileUrl是当前文件的URL，fileName是文件的名称。

3. 在utils/filter中定义showPreviewUrl过滤器函数，例如：

import Vue from 'vue'
//文件预览
<!-- 情况1：传递该文件的所有对象 -->
Vue.filter('showPreviewUrl', function (fileUrl) {
    
    
    const docArr = ['doc', 'docx', 'docm', 'dotm', 'dotx', 'xlsx', 'xlsb', 'xls', 'xlsm', 'pptx', 'ppsx', 'ppt', 'pps', 'pptm', 'potm', 'ppam', 'potx', 'ppsm'];
    const extension = fileUrl.split('.').pop();
    const index = docArr.findIndex(item => item === extension);
    if (index !== -1) {
    
    
      return `https://view.officeapps.live.com/op/view.aspx?src=${
      
      encodeURIComponent(fileUrl)}`;
    } else {
    
    
      return fileUrl;
    }
  });

<!-- 情况2：传递该文件的所有对象 -->
Vue.filter('showPreviewUrl', function (file) {
    
    
    let url = file.file_url; // 文件的地址
    const docUrl = 'https://view.officeapps.live.com/op/view.aspx?src=';
    let docArr = ['doc', 'docx', 'docm', 'dotm', 'dotx', 'xlsx', 'xlsb', 'xls', 'xlsm', 'pptx', 'ppsx', 'ppt', 'pps', 'pptm', 'potm', 'ppam', 'potx', 'ppsm'];
    const extension = file.extension;
    const index = docArr.findIndex(item => item == extension);
    if (index !== -1) {
    
    
        url = docUrl + url;
    }
    return url;
});

其中：
fileUrl是当前文件的URL，
docArr是预定义的文档类型数组，
split()方法和pop()方法用于获取文件的扩展名，
findIndex()方法用于查找扩展名是否在文档类型数组中，encodeURIComponent()方法用于对文件URL进行编码，以便在URL参数中使用。

4. 最后，在浏览器中访问该组件的页面，就可以看到文件链接，并且可以点击链接进行文件预览了。