Vue 前端导出、下载zip/excel文件流blob、public静态文件下实现下载本地文件、Vue打包后下载静态资源里的pdf文件

心动止于人海。

10174人浏览 · 2020-09-14 19:21:28

心动止于人海。 · 2020-09-14 19:21:28 发布

vue项目中下载静态资源里的pdf文件_vue下载静态文件-CSDN博客

Vue打包后下载静态资源里的pdf文件

1.把文件放在项目目录src/assets文件下

2.在项目是用a标签下载

<a
              target="_blank"
              rel="noopener noreferrer"
              :href="
                require('@/assets/pdf/技术规范标准.pdf')
              "
              download="技术规范标准.pdf"
              style="color: #1890ff"
              >点击此处下载链接</a
            >

以上项目运行会报错

Failed to compile.
./src/assets/download.pdf 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

3.需要在vue.config.js中配置！！！

代码

 configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    module: {
      rules: [{
        test: /\.pdf$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: 'files/[name].[ext]'
          }
        }]
      }]
    }
  },

public静态文件下实现下载本地文件 docx,excel 等

第一步:首先要把自己所需要下载的文件放入public文件下

第二步:参考以下代码:

  <el-button type="primary" size="mini" @click="downloadAttachment">下载</el-button>

    downloadAttachment() {
      console.log("尝试下载文件...");
      const attachmentUrl = "/static/files/事故档案.docx";
      const link = document.createElement("a");
      link.href = attachmentUrl;
      link.download = "事故档案.docx";
      document.body.appendChild(link); // 很重要，添加到 DOM
      link.click();
      document.body.removeChild(link); // 下载完后移除
    },

第三步:注意点

出现这种情况的原因是因为路径不对,选择相对路径可以a标签检查下自己的路径

a标签下载pdf成预览状态↓

<a
              href="/static/files/cc方标准.pdf"
              target="_blank"
              rel="noopener noreferrer"
              style="color: #1890ff"
              >点击此处链接</a
            >

↓

<a href="/static/files/事故档案.docx" download>下载事故档案</a>

// import './mock/index.js';  // 该项目所有请求使用mockjs模拟 去掉mock

页面接口url下载

word文件：
.doc格式的设置为：application/vnd.msword;charset=utf-8

pdf文件
.pdf格式的设置为：application/pdf;charset=utf-8

excel文件：
.xls格式的设置为：application/vnd.ms-excel
.xlsx格式的设置为：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

zip文件：
. zip格式的设置为：application/zip


/*  mineType  文件类型例如：
	* 下载 Excel :    "application/vnd.ms-excel"
	*下载 Word ： 	 "application/msword"
	*下载 Zip 方法：  "application/zip"
	*下载 Html 方法： "text/html"
	* 下载 Markdown   "text/markdown"
	* *下载pdf         "application/pdf"
*/

responseType: "blob",

let blob = new Blob([response.data], { type: "application/zip" }); //注意是response 或者 response.data
let url = window.URL.createObjectURL(blob); 这三句最重要！！！

//普通代码
axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
    // 创建Blob对象，设置文件类型
    let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
    let objectUrl = URL.createObjectURL(blob) // 创建URL
    location.href = objectUrl;
    URL.revokeObjectURL(objectUrl); // 释放内存
})


//通用模板下载、导出 excel
export function getFiles(obj) {
    return request({
        url: '/api/pu/unite/download/template',
        method: 'get',
        params: obj,
        responseType: "blob",
    });
}

//导出excel
downloadAll1() {
      getFiles({
        ledgerId: row.ledgerId
      })
        .then((response) => {
          let blob = new Blob([response.data], { type: "application/zip" });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "模板下载"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
          this.checkList = [];
        })
        .catch((error) => {
          console.log(error.data);
        });
        
    },

downloadAll2() {
      axios({
        method: "get",
        url: "api/TemplateDownload/GetAllTemplateZIP",
        headers: {
          "content-type": "application/json; charset=utf-8",
          Authorization: Cookies.get("token") || "",
        },
        responseType: "blob",
      })
        .then((response) => {
          let blob = new Blob([response.data], { type: "application/zip" });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "模板下载"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
          this.checkList = [];
        })
        .catch((error) => {
          console.log(error.data);
        });
        
    },


//excel 
let blob = new Blob([response.data], { type: "application/vnd.ms-excel" });

dl() {
      axios({
        method: "get",
        url: "http://10.180.170.3:8794/tRptMwStdClt/exportData?time=202104",
        responseType: "arraybuffer",
      })
        .then((response) => {
          console.log(response);
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "模板下载"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
          this.checkList = [];
        })
        .catch((error) => {
          console.log(error.data);
        });
    },

获取到了后台传过来的excel文件前端用vue怎么接收并导出？ - 中文 - Vue Forum

vue.js前端实现excel表格导出和获取headers里的信息 - 五个半柠檬 - OSCHINA - 中文开源技术交流社区

java后台需要设置

 response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
 response.setHeader("Access-Control-Expose-Headers","Content-Disposition");

才能获取到文件名等信息

 // 导出execel2
    handleExcel() {
      this.$http({
        url: this.$http.adornUrl(url),
        method: "post",
        responseType: "blob",//!!!!
        params: this.$http.adornParams({
          userAccount: this.userName,
        }),
      }).then((res) => {
        // console.log(res, "res");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        let fileName = decodeURI(
            response.headers["content-disposition"].split(";")[1].split("=")[1]
          );
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        link.download = fileName; // 重命名文件
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      });
    },