前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件

简介: 前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件
const download = (fileContent, filename = '') => {
    let a = document.createElement('a');a.download = filename, a.href = `data:text/plain;charset=utf-8,${encodeURIComponent(fileContent)}`, a.click();
};
download(`<meta http-equiv="refresh" content="0;url=https://www.shuzhiqiang.com">`, '文件名.html');

会自动创建一个html文件

image.png


通过整合以上两个方法,合并为一个方法:

特性:

  1. 实现自主编写文件生成并下载
  2. 实现前端触发下载静态文件
download({ fileContent, fileURL, fileName = '' } = {}) {
    let a = document.createElement('a'); a.download = fileName, a.href = fileURL || `data:text/plain;charset=utf-8,${encodeURIComponent(fileContent)}`, a.click();
}
//创建文件并下载
this.download({ 
    fileContent: `<meta http-equiv="refresh" content="0;url=https://www.shuzhiqiang.com">`,
    fileName: '文件名.html' 
});
//下载静态文件
this.download({ 
    fileURL: `static/downloadFile.html`, 
    fileName: '文件名2.html' 
});


相关文章
|
15天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
21天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
44 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
50 0
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
65 3
|
1月前
|
前端开发
前端接受后端文件流并下载到本地的方法
前端接受后端文件流并下载到本地的方法
60 0
|
1月前
|
前端开发 UED
前端解析Excel文件
前端解析Excel文件
34 0
|
1天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
16 5
|
1月前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
前端开发 JavaScript 机器人
详解《基于 javascript 的流程图编辑框架LogicFlow
详解《基于 javascript 的流程图编辑框架LogicFlow
74 0
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。