前端实现下载文件，获得本地的文件

我使用vue，但是其他的都一样，可以直接用window.open实现文件下载，反正是JavaScript。

下面用了个button来获得

<script setup>
import axios from "axios";
</script>

<script>
export default {
  methods: {
    get_result() {
			window.open("result.csv",'_self');
    },
  },
};
</script>

<button @click="get_result()" >Download</button>

他实现的效果就是直接右上角下载的那种效果
关于window.open后写的文件的路径，在vue项目里面，浏览器是从public那里开始的，所以我那个result文件在vue根目录/public/result.csv。那本地就直接写路径，远端就写url+路径。

除了这样子实现，其他方式可以搜索“前端实现文件下载的方式”，
他们详细写了各种方式的优缺点。

• https://www.jianshu.com/p/cf2dffbee212
• https://blog.csdn.net/weixin_46074961/article/details/105677732

到此结束

下面是碎碎念，可以不用看了
我一开始是用axios去get文件的。。以为用file:///协议，因为在本地用浏览器打开pdf就是file协议，

但是点击后浏览器console会提示

安全错误：位于 http://localhost:5173/ 的内容不可以载入或者链接至 file:///F:/xxx

那于是我又改成了当前vue文件的相对路径，

axios.get("../public/result.csv");

然后vue提示我说路径错了。（vue真好^_^）

所以可以确定了，vue在运行的时候根目录在public这里

然后点击button后，可以看到get成功了（但是网页没有下载哈）