“这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战”
本文主要总结前端开发项目中常用的工具函数。
建议大家在项目中新建个utils/index.js
文件,用于保存所有的工具函数,目录如下:
utils
index.js
然后编辑器安装的自动导入的插件,输入关键字即可引入对应的工具函数
每个函数都已通过单元测试,请放心使用。
数据格式转换
向后端发送数据请求时,经常会进行数据格式的转换,有时候要把json数据转成urlencode,有时候要把json数据转成formdata
对象转化为formdata
/**
* 对象转化为formdata
* @param {Object} object
*/
export function getFormData(object) {
const formData = new FormData()
Object.keys(object).forEach(key => {
const value = object[key]
if (Array.isArray(value)) {
value.forEach((subValue, i) =>
formData.append(key + `[${i}]`, subValue)
)
} else {
formData.append(key, object[key])
}
})
return formData
}
对象转成urlencode
{name:xxx,age:11} -> name=xxx&age=11
/**
* 对象转化为url参数
* @param {*} obj
*/
export function getParams(obj) {
return Object.keys(obj)
.map(function(k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])
})
.join('&')
}
url编码转成json格式 'name=xxx&age=11' -> {name:xxx,age:11}
function getObjByUrl(str){
return Object.fromEntries(new URLSearchParams(str));
}
//使用方式:getObjByUrl('a=b&name=xxx%20djdj')
浏览器下载文件
根据场景不同,划分如下:
-
下载字符串,使用场景是自己生成一个文件,可以是json文件也可以是html文件,然后下载
-
下载文件
- 浏览器会默认执行下载的,例如excel,word等
- 浏览器会默认执行预览的,例如图片、视频等
下载文件的原理是利用a标签的download属性,工具函数如下:
//下载一个链接
export function download(link, name) {
if(!name){
name=link.slice(link.lastIndexOf('/') + 1)
}
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
以上代码的原理是:创建一个a标签,设置download属性,设置a标签的href属性等于要下载的链接。
对于浏览器会默认执行下载的文件,例如excel,word,ppt等文件,直接调用download方法即可。 举个栗子如下:
download('http://111.229.14.189/file/1.xlsx')
如果你想在浏览器中下载点什么东西,比如一个页面的Html或者一个json数据,可以调用下面的方面
/**
* 浏览器下载静态文件
* @param {String} name 文件名
* @param {String} content 文件内容
*/
export function downloadFile(name, content) {
if (typeof name == 'undefined') {
throw new Error('The first parameter name is a must')
}
if (typeof content == 'undefined') {
throw new Error('The second parameter content is a must')
}
if (!(content instanceof Blob)) {
content = new Blob([content])
}
const link = URL.createObjectURL(content)
download(link, name)
}
原理是创建一个Blob对象,然后生成一个浏览器可以预览的地址,然后调用上面的download方法就好了。
使用示例如下:
// 可以用来下载JSONString html等内容,只要是字符串都可以下载
const json=JSON.stringify({name:'xiaoming',age:11})
downloadFile('1.json',json)
可以在浏览器执行一下试下
第三种情况,对于浏览器会默认执行下载的文件,例如pdf,图片,视频等,下载方式如下:
//可以用来下载浏览器会默认预览的文件类型,例如mp4,jpg等
import axios from 'axios'
//提供一个link,完成文件下载,link可以是 http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
axios.request({
url: link,
responseType: 'blob'
}).then(res => {
const link=URL.createObjectURL(res.data)
download(link, fileName)
})
}
原理很简单,请求要下载的链接,然后生成一个Blob对象,然后生成一个浏览器可以预览的url,调用download方法即可。
对于后端的一些返回数据流的下载接口,也可以这样处理。
但是有个注意事项,即 仅支持同源的链接,如果链接不同源的话,就本地转发一下就好了,或者让后端转发。
最后放一个可以执行的demo,把下面的Html保存下,在浏览器中执行下看下效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="http://111.229.14.189/file/axios.min.js"></script>
</head>
<body>
<button id="downloadCustom">下载自定义内容</button>
<button id="downloadExcel">下载excel</button>
<button id="downloadPic">下载图片</button>
<script>
//提供一个链接用户下载内容
function download(link, name) {
if (!name) {
//如果没有提供名字,从给的Link中截取最后一坨
name = link.slice(link.lastIndexOf('/') + 1)
}
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
function downloadFile(name, content) {
if (typeof name == 'undefined') {
throw new Error('The first parameter name is a must')
}
if (typeof content == 'undefined') {
throw new Error('The second parameter content is a must')
}
if (!(content instanceof Blob)) {
content = new Blob([content])
}
const link = URL.createObjectURL(content)
download(link, name)
}
function downloadByLink(link, fileName) {
axios
.request({
url: link,
responseType: 'blob'
})
.then((res) => {
const link = URL.createObjectURL(res.data)
download(link, fileName)
})
}
// 下载自定义的字符串
function downloadCustom() {
// 可以用来下载JSONString html等内容,只要是字符串都可以下载
const json = JSON.stringify({ name: 'xiaoming', age: 11 })
downloadFile('1.json', json)
}
//下载浏览器不会默认预览的文件,例如excel,word,ppt
function downloadExcel() {
download('http://111.229.14.189/file/1.xlsx')
}
// 下载浏览器会默认执行预览的文件,例如
function downloadPic() {
// 需要转发才可以,否则会有同源策略
downloadByLink('http://111.229.14.189/file/1.jpg')
}
;(function () {
document.getElementById(
'downloadCustom'
).onclick = downloadCustom
document.getElementById('downloadExcel').onclick = downloadExcel
document.getElementById('downloadPic').onclick = downloadPic
})()
</script>
</body>
</html>
下篇继续说工具函数,明天更新。