vue 文件下载支持 .jpg .jpeg .png .pdf .ofd .doc .docx .ppt .csv .pptx .txt .xlsx .xls .rar .zip

一只敲码的猫~

于 2024-04-26 11:23:30 发布

阅读量223

点赞数 3

分类专栏： es6 vue JavaScript 文章标签：前端 node.js vue.js

本文链接：https://blog.csdn.net/qq_38946996/article/details/138213201

版权

vue 同时被 3 个专栏收录

105 篇文章 2 订阅

订阅专栏

es6

78 篇文章 2 订阅

订阅专栏

JavaScript

52 篇文章 1 订阅

订阅专栏

这段代码 url是文件路径 fileName文件名称（不好用），支持（ .doc .docx .ppt .csv .pptx .xlsx .xls .rar .zip）

    aBaseDown(url, fileName) {
      // 创建一个隐藏的<a>标签，并设置其href属性为临时URL
      const a = document.createElement('a');
      a.href = url;
      a.target = '_blank'
      a.download = fileName; // 设置下载的文件名
      a.setAttribute('download', fileName);
      a.style.display = 'none';
      // 将<a>标签添加到文档中，并模拟点击下载
      document.body.appendChild(a);
      a.click();
      // 下载完成后，移除<a>标签和临时URL对象
      document.body.removeChild(a);
    }

这段代码支持图片下载（ .jpg .jpeg .png等） baseUrl是图片路径

fetch(baseUrl)
        // 获取 blob 对象
        .then(res => res.blob())
        .then(blob => {
          // 创建a标签
          var link = document.createElement('a');
          // 设置a标签为不可见
          link.style.display = 'none';
          // 将a标签添加到body
          document.body.appendChild(link);
          // 生成Blob URL并设置给a标签的href属性
          let url = window.URL.createObjectURL(blob);
          link.href = url;
          // 设置a标签的download
          // link.download = '';
          // 模拟点击事件进行下载
          link.click();
          //下载完成后清理URL对象和a标签
          window.URL.revokeObjectURL(url);
          document.body.removeChild(link);
        })

这段代码支持pdf ofd

    pdfDown(url, fileName) {
      axios(url, {
        responseType: 'blob', //重要代码
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        console.log(link);
        link.remove();
      })
    },```