最近用vue整前端，有个下载帮助文档的需求，前后端分离的项目，对于万年不变的帮助文档来说，本次就准备放在前端，实现直接从前端下载文件：
下面是实现的具体方法：
downfile() {
            var url = "../static/file/test.pdf";
            var filename = "test.pdf";
            return fetch(url).then(res => res.blob().then(blob => {
                let a = document.createElement('a');
                let url = window.URL.createObjectURL(blob);
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
            }))
        }

1.vue-cli2+vue


	注意：vue-cli2本地文件需要放在静态文件static下

<a  href="javascript:void(0);" @click="download">帮助文档</a>

	download(){
      axios.get('static/export.pdf', {
        responseType: 'blob', //重要
        }).then(response => {
          //判断是否是IE浏览器，是的话返回true
          if ("msSaveOrOpenBlob" in navigator) {//兼容ie浏览器下载报传递给系统调用的数据区域太小.
              var data = response.data;
              var blob = new Blob([data], { type: "application/vnd.ms-excel" });
              window.navigator.msSaveOrOpenBlob(blob, '帮助文档.pdf');
              return;
          } else {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            let fname = '帮助文档.pdf';
            link.href = url;
            link.setAttribute('download', fname);
            document.body.appendChild(link);
            link.click();
          }
        });
    },

2.vue-cli3 +vue  参考此篇文章

目录

1.需求确定

2.具体内容

3.总结

1.需求确定

最近在项目中要点击“帮助文档”，下载《系统操作手册》。

也就是获取静态资源文件export.pdf，将pdf文档下载至本地。

拿到这个需求后，找了些方案，如下

方案1：在vue cli中安装一些插件，如jquery，利用jquery下载本地文件；

方案2：直接使用原生ajax下载本地文件；

方案3：利用axios请求；

最后考虑到项目中已经在使用axios，就采用方案3。

2.具体内容

在使用过程中发现问题记录如下：

项目1：vue 2.0 + element ui+es5中

利用a标签，给个点击事件download()

<a id="attname" class="attname" href="javascript:void(0);" @click="download">帮助文档</a>



页面已经引用过axios，使用如下：

import axios from 'axios';



Download方法中为避免无法导出，将待导出文件名称改为英文“export.pdf”，导出后的名称设置为中文名称“系统操作手册.pdf”；

待导出文件放在“static”文件夹下；  

  download(){

        axios.get('static/export.pdf', {

          responseType: 'blob', //重要

        }).then(response => {

          const url = window.URL.createObjectURL(new Blob([response.data]));

          const link = document.createElement('a');

          let fname = '系统操作手册.pdf';

          link.href = url;

          link.setAttribute('download', fname);

          document.body.appendChild(link);

          link.click();

        });

      

    }

项目2：vue 3.0 + iview ui+typescript中

利用a标签，给个点击事件download()

<a id="attname" class="attname" href="javascript:void(0);" @click="download">帮助文档</a>



页面已经引用过axios

import axios from 'axios';

Download方法中为避免无法导出，将待导出文件名称改为英文“export.pdf”，导出后的名称设置为中文名称“系统操作手册.pdf”；

在“public”文件夹下建“export”文件夹，放待导出文件；  

  download(){

        axios.get('export/export.pdf', {

          responseType: 'blob', //重要

        }).then(response => {

          const url = window.URL.createObjectURL(new Blob([response.data]));

          const link = document.createElement('a');

          let fname = '系统操作手册.pdf';

          link.href = url;

          link.setAttribute('download', fname);

          document.body.appendChild(link);

          link.click();

        });

      

    }



其中，在项目2的使用过程中遇到了问题，将待下载文件放在“static”或“assets”文件夹下，始终获取不到待下载文件，不同的后缀的文件“.json、.ts”等都是404找不到，如下:



 

经过一天的问题查找，发现vue cli3.0中静态资源文件夹为“public”，在“public”文件夹下建“export”文件夹，放待导出文件“export.pdf”后，返回状态码200，下载正常：



3.总结

vue cli2.0的静态文件是static

vue cli3.0的静态文件是public

童鞋们使用过程中千万不要搞错了，会获取不到本地文件的

注：除本文中pdf文件外，还可下载其他格式为文件，使用方式类似；

记录一下，以备查询使用；

 

大家好，我来了！
本期给大家带来几款IT相关的chrome浏览器扩展。
优秀的扩展程序能很好地帮助您提升工作效率。
话不多说，直接入正题，走起~~~
一、FeHelper(前端助手)
JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！
FeHelper(前端助手)
二、Postman
发送通过Postman Chrome应用触发的请求。Postman Interceptor可帮助您通过Postman应用发送使用浏览器cookie的请求。
Postman
三、Clear Cache
清除缓存和Chrome浏览数据的最佳方法！轻松清除历史记录，下载，cookie或设置自动清除历史记录！Clean Guru是有用且轻巧的附加组件，旨在提供更舒适的浏览体验。
清洁大师很容易使用。适用于Chromebook，Windows PC，Mac或Linux的最佳清洁历史记录和缓存工具之一。
Clear Cache
四、WhatRuns
WhatRuns框架，分析工具。
运行WhatRuns扩展程序，以查找所访问的任何网站上使用的技术。从开发人员工具和广告网络到Wordpress插件和主题，我们甚至可以检测到新的和即将推出的工具和服务。
WhatRuns
五、JSON-handle
JSON-handle是JSON文档的浏览器和编辑器。
对JSON格式的内容进行浏览和编辑，以树形图样式展现JSON文档，并可实时编辑。在节点树图中编辑和浏览JSON文档。
JSON-handle
六、Code Cola
Code Cola是一个可视化编辑在线页面css样式的chrome插件。
Code Cola
以上就是今天分享的内容，希望对小伙伴们有所帮助。如果大家有什么想要了解的，或者想要使用到的相关插件和软件都可以评论区留言，小编免费帮大家寻找。
如果您觉得小编的分享对您有帮助，请关注走起，关注了后期更新不迷路~~~