iframe标签的使用（二）01——文件下载功能 & 下载方法的抽离 & vue3.0页面结构的应用

iframe标签的使用（二）01——vue3.0页面结构的应用 & 文件下载功能-抽离下载方法-引用方式

效果-下载

结构

 <el-button type="primary" @click='openFile(attachmentUrl, fileName)'>下载</el-button> 

实例

<label>附件:</label>
<span class='pointer color-1890ff' @click='openFile(attachmentUrl, fileName)'>
    {{ fileName }}
</span>

方法

方式1：封装方法进行引用

//index.ts可省略
import { downloadFile } from '@/axios/index.ts';
//.ts可省略
import useDownFileMethods from '@/views/PersonalCenter/useDownFileMethods.ts'

setup(props) {
    const {openFile} =useDownFileMethods(props)
    return {
        openFile,
    };
}

引用文件

1、src/axios/index.ts

 /**
  * 下载文件通过DFS url
  * @param url
  * @param name
  * @param params
  */
 export const downloadFile = (url: string, name?: string, params?: Object) => {
     axios
         .get(url, {
             params,
             responseType: 'blob'
         })
         .then(res => {
             let fileName = '';
             //判断是否存在 . 如果不存在说明是自己传入
             if (name.indexOf('.') === -1) {
                 fileName = name;
                 fileName += url.length
                     ? '.' + url.substring(url.lastIndexOf('.') + 1, url.length)
                     : '';
             } else {
                 //存在 filename 直接使用
                 fileName = name;
             }
             downloadByBlob(res.data, fileName);
         });
 };

 export const downloadByBlob = (blob: Blob, fileName: string) => {
     //不建议改这个 post 还有get  流下载都通过这种形式
     const b = new Blob([blob],{type:'application/vnd.ms-excel'});
     let link = document.createElement('a');
     const href = URL.createObjectURL(b);
     link.href = href;
     link.download = fileName;
     link.click();
     link = null;
     window.URL.revokeObjectURL(href);
 };

2、src/views/PersonalCenter/useDownFileMethods.ts

/*文件下载 公共方法*/

import {ElMessage} from "element-plus";
import {downloadFile} from "@/axios";
import {reactive} from "vue";

function useDownFileMethods(props) {
    const openFile = (file, fileName) => {
        if (!file) return ElMessage.warning('文件地址不存在！');
        downloadFile(file, fileName);
    }
    return {
        openFile
    }
}

export default useDownFileMethods