Vue下载静态文件

于 2024-09-26 14:14:26 发布
阅读量271 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y1914960928/article/details/142554349
版权

1、需求：将静态文件放在本地，让用户进行下载。

在这里插入图片描述

2、文件位置：

① 原生js：直接将文件放在某个目录或者根目录下
② Vue：将文件放在根目录的public文件夹下面

3、代码示例：

const url = "/模板.xlsx";
window.open(url, "_blank");

4、报错：无法从网站提取文件

原因：路径写错了

ᥬ 小月亮
关注
专栏目录
vue前端获取项目下的静态资源文件夹中的文件并下载
jieweiwujie的博客
09-26 1710
【代码】【无标题】
vue引入静态js文件的方法
10-15
值得注意的是，一个常见的错误是在开发环境中误用`import`语句来引入`public`目录下的静态文件。由于这些文件不会经过Webpack打包，所以使用`import`会导致在生产环境部署时失效。正确做法是像上面那样，通过`...
vue下载静态文件
weixin_52594927的博客
08-01 1089
下载本地文件
Vue下载本地静态资源static文件夹中的.xlsx .docx
最新发布
qq_28170105的博客
07-09 616
下载模板
vue项目静态文件资源下载
zluz_的博客
08-29 1812
Vite 使用 ES 模块规范，并且支持动态导入（Dynamic Import）语法，可以通过 import() 来实现异步加载模块或导入非 JavaScript 文件；同时提供了一个静态资源处理的方法。对于 Vue 3 + Vite 项目，使用 require 方法来导入模块是不被支持的。require 是 CommonJS 规范中用于模块导入的方法，在 Webpack 等构建工具中常用。
Vue下载静态资源
qq_41562817的博客
12-04 3045
当本地文件放在src下的assets文件夹时，webpack在打包时会对其进行处理，导致后续文件路径找不到的问题。2. download属性，能够重命名文件的名称（即下载的文件名称为 “模板名称_中文”）解决方式：在href路径上，改“/static”为“./static”webpack 打包时，不会对public文件进行修改；需求：vue2 + webpack , 点击下载模板，实现本地资源下载。问题：打包至测试环境，发现文件路径找不到。二、本地文件存放在public文件下。
VUE下载静态模板文件
CSDN__FL的博客
02-17 2105
注意：一定要在public文件夹中新建文件夹存放静态资源，不能在src文件夹中新建文件夹存放静态资源，因为public文件夹中的文件资源不会被npm run build打包编译。大家打包一下，就会发现 模板.xlsx文件 是存放在dist/static文件夹中。word、excel、pdf等文件同理。只要a标签下载的时候路径对得上即可，这里不赘述。写的不好，请多担待。
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于...
vue从前端静态资源包中下载文件
weixin_41103943的博客
06-05 1038
有些时候我们需要实现下载模板和图片等功能，文件量少、体积小、不做修改，放在后端做又有点麻烦，可以直接放在前端做，方便快捷。
Vue下载静态文件(解决无法从网站上提取文件)
qq_46344419的博客
02-28 2790
Vue下载静态文件(解决无法从网站上提取文件)
vue项目中下载静态资源里的pdf文件
Thea12138的博客
02-19 1114
1.把文件放在项目目录src/assets文件下。3.需要在vue.config.js中配置！2.在项目是用a标签下载。
vue-cli4前端实现下载本地Excel模板，以及下载静态文件的坑
m0_63026408的博客
06-20 3127
1. a标签用 :href="../static/1111.xls" download=“文件名称" 下载;但是现在cli已经出到4了，需要将文件放在public里面才不会被打包，需要注意的是：cli2里面需要把要下载的文件放在static下面；3. window.open等等；
Vue 实现下载本地静态文件
weixin_47906106的博客
09-05 3918
vue 本地文件下载
Vue 下载本地静态资源static文件夹
码农键盘上的梦
03-22 7560
项目需要下载本地的docx文档，文档是放在本地的没有在服务器，所以需要下载本地静态资源文件，开始把文件放在了这里src目录下的assets资源文件下。下载报错 找不到文件路径查找原因是因为项目用的是vue-cli3, 在打包的时候并不知道会把assets。你可能在输入路径的时候会提示你是src,而不直接是static,但是你还是要直接输入static这个路径。下的文件打包在哪里，但是在build的时候发现在根目录下的文件是打包在当前路径下的。
vue请求接口返回文件流并进行下载
annier_11的博客
09-15 6396
vue项目，有两种方式实现请求接口返回文件流并进行下载： 第一种：使用a标签的特性，使用链接实现 第二种：下载文件流的方式
VUE下载项目静态资源文件
m0_65209474的博客
10-26 904
VUE下载项目静态资源文件
vue3 下载静态文件
03-22
在Vue 3中，下载静态文件可以通过使用`<a>`标签的`download`属性或者使用JavaScript的`fetch` API来实现。 1. 使用`<a>`标签的`download`属性： 在Vue模板中，你可以创建一个`<a>`标签，并设置`href`属性为文件的URL，然后添加`download`属性来指定下载文件的名称。例如： ```html <a href="/path/to/file.pdf" download="myfile.pdf">点击下载文件</a> ``` 当用户点击该链接时，浏览器会自动下载文件，并将其保存为指定的文件名。 2. 使用JavaScript的`fetch` API： 在Vue组件中，你可以使用`fetch` API来下载静态文件。首先，你需要使用`fetch`函数获取文件的URL，并将其作为参数传递给`fetch`函数。然后，你可以使用`response.blob()`方法将响应转换为Blob对象，并使用`URL.createObjectURL()`方法创建一个临时URL。最后，你可以创建一个隐藏的`<a>`标签，并设置其`href`属性为临时URL，然后使用JavaScript模拟点击该链接来触发文件下载。以下是一个示例代码： ```javascript // 下载文件的函数 function downloadFile(url, filename) { fetch(url) .then(response => response.blob()) .then(blob => { const blobUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = blobUrl; a.download = filename; a.style.display = 'none'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(blobUrl); }); } // 调用下载文件的函数 downloadFile('/path/to/file.pdf', 'myfile.pdf'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值