Vue/html下载本地文件

原创 已于 2022-12-15 10:03:51 修改 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#1024程序员节

于 2022-10-24 17:30:32 首次发布
分享如何使用HTML的download属性在前端直接下载文件，特别关注微前端环境下文件路径管理技巧，适合新手入门。

业务

今天公司新来的小兄弟，来问我前端怎么下载本地文件作为模板，想到之前做的导出功能，小兄弟说模板一定要后端提供，好吧，记录一个简单的前端下载文件方式。

实现

<a href="/public/123" download="模板">下载模板</a>

文件路径和内容

文件路径展示
文件内容

下载成功

在这里插入图片描述

提示

  • 路径href需要是绝对路径
  • 微前端环境下，文件在base统一管理，路径也是在base
前端引用vue/element/echarts资源等引用方法Blob下载HTML
共同进步
07-04 914
需求是在HTML页面中集成Vue.js、Element Plus（Element UI的Vue 3版本）、ECharts等前端资源，使用Blob下载HTML。首先，将CSS和JS文件的内容直接嵌入到HTML字符串中通常不是一个好的做法，因为这会使生成的HTML文件变得非常大，增加了页面加载时间和内存使用。此外，这样做还可能导致跨站脚本（XSS）攻击的风险增加，因为正在动态地执行从服务器获取的JavaScript代码。
vue.js下载 HTML引入vue
10-28
html引入vue ，需要先在HTML引入vue.js,才能在js使用new vue绑定数据，这个是最基础的js
下载html文件
02-01
用Java实现下载html文件的工具类.
简单的下载一个页面中所有链接的html文件
11-06
使用vc的http类下载一个网页中所有的url文件，用来脱机浏览。
vue中本地文件下载
qq_38958822的博客
05-17 538
为防止原文失效，转载此贴。
vue将文件下载到本地
m0_64590669的博客
05-11 939
【代码】vue将文件下载到本地。
精选资源
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
05-06
在Vue项目中，有时我们需要实现页面截屏并下载图片到本地的功能，特别是在处理用户交互或者数据分析时。HTML2Canvas是一个非常实用的JavaScript库，它能够将HTML元素转换为Canvas，进而可以导出为图片。然而，这个...
在vue中读取本地Json文件的方法
10-18
- 对于生产环境，如果你打算从服务器获取数据，而不是本地文件，那么你需要替换`$http.get`的URL，指向你的API服务器。 通过以上步骤，你可以在Vue应用中顺利读取本地JSON文件，获取所需的数据。这种方法在开发...
vue生成文件本地打开查看效果的实例
10-18
总结起来，Vue生成文件本地打开查看效果的关键在于调整Webpack的公共路径配置，使其适应本地文件系统的路径解析规则。通过将`assetsPublicPath`设置为'./'，可以确保在本地打开dist目录下的HTML文件时，所有相关的...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...
vue 下载本地文件
热门推荐
yorcentroll的博客
04-29 1万+
情景描述： 有时，我们需在在前端项目中下载本地某个地址的文件模块，这个文件不想放在后端去下载。所以，在这个文件大小不是太大的情况下，我们可以把文件放在前端项目目录中，这样不管开发环境还是生产环境，都能在同样的路径下找到那个文件。 实现： 1. 先得把文件放在项目工程目录下的某个路径下，这个路径不管是开发环境还是打包之后在生产环境，都是一样的。在vue-cli 3.x+的版本中，这个文件...
vue本地文件下载
q249859693的博客
10-22 389
vue本地文件下载
vue项目下载本地文档
weixin_40112036的博客
12-22 700
【代码】vue项目下载本地文档。
Vue 之 下载本地资源文件
zhuang的博客
11-14 3720
利用 a 标签实现，这里需要注意的是： 我们这里的本地资源文件是放在 public 下的（不建议放在 assets 目录下）； 这里需要区分生产环境和开发环境，如果你的项目部署到服务器上的某个目录下（比如 test 目录下），那么你需要在给 a 标签绑定路径的时候也是需要做下区分的，开发环境直接 / 就可以，但是部署到生产环境之后一定要在你的路径前面加上你项目部署的那个目录名称（如代码所示）； 封装一个方法： let prefixUrl = process.env.NODE_ENV === 'produ
vue 下载项目本地文件
最新发布
qq_57039857的博客
07-23 1948
下载项目本地文件
在vue-cli 下载本地文件
qq_66211468的博客
04-25 509
根本不是用相对路径一个/static直接是public路径去了不太懂原理，先当做解决方案吧······
Vue下载本地pdf、word、excel文件
m0_67584973的博客
09-26 8740
Vue下载pdf、word、excel文档
vue实现html内容下载为pdf文件
weixin_43939111的博客
03-10 808
html2canvas：通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。jspdf：基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。
下载vue js 包html引用本地文件
10-26
要下载Vue.js包并在html中引用本地文件，您可以按照以下步骤操作： 1. 首先，您需要从Vue.js官网下载Vue.js的压缩文件（vue.min.js）。您可以在浏览器中搜索"Vue.js官网"并导航到官方网站。 2. 在官网上找到下载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值