“这是我参与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>
下篇继续说工具函数，明天更新。
