"Это 27-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления"
1. Загрузите документ Excel
Это также применимо к документам, для которых такие браузеры, как word и ppt, не выполняют предварительный просмотр по умолчанию, а также может использоваться для загрузки потоковых данных, возвращаемых внутренним интерфейсом.3
//下载一个链接
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)
}
//下载excel
download('http://111.229.14.189/file/1.xlsx')
2. Настройте и загрузите некоторый контент в браузере
Сценарий: я хочу загрузить некоторый контент DOM, я хочу загрузить файл JSON
/**
* 浏览器下载静态文件
* @param {String} name 文件名
* @param {String} content 文件内容
*/
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 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)
}
Как использовать:
downloadFile('1.txt','lalalallalalla')
downloadFile('1.json',JSON.stringify({name:'hahahha'}))
3. Загрузите поток, возвращенный серверной частью
Данные возвращаются серверной частью в виде интерфейса, вызывающего1метод загрузки в
download('http://111.229.14.189/gk-api/util/download?file=1.jpg')
download('http://111.229.14.189/gk-api/util/download?file=1.mp4')
4. Укажите ссылку на картинку, нажмите, чтобы скачать
Для изображений, pdf и других файлов браузер будет выполнять предварительный просмотр по умолчанию, и метод загрузки не может быть вызван для загрузки.Вам необходимо преобразовать изображения, pdf и другие файлы в BLOB-объекты, а затем вызвать метод загрузки для загрузки. метод преобразования заключается в использовании axios для запроса соответствующей ссылки
//可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等
import axios from 'axios'
//提供一个link，完成文件下载，link可以是 http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
axios.request({
url: link,
responseType: 'blob' //关键代码，让axios把响应改成blob
}).then(res => {
const link=URL.createObjectURL(res.data)
download(link, fileName)
})
}
Примечание. Будут ограничения на политику одного и того же источника, и необходимо настроить переадресацию.
6 Защита от сотрясения
В определенный интервал времени вызов метода несколько раз будет выполнен только один раз.
Реализация этого метода скопирована из библиотеки Lodash.
/**
*
* @param {*} func 要进行debouce的函数
* @param {*} wait 等待时间,默认500ms
* @param {*} immediate 是否立即执行
*/
export function debounce(func, wait=500, immediate=false) {
var timeout
return function() {
var context = this
var args = arguments
if (timeout) clearTimeout(timeout)
if (immediate) {
// 如果已经执行过，不再执行
var callNow = !timeout
timeout = setTimeout(function() {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}
Как использовать:
<!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>
</head>
<body>
<input id="input" />
<script>
function onInput() {
console.log('1111')
}
const debounceOnInput = debounce(onInput)
document
.getElementById('input')
.addEventListener('input', debounceOnInput) //在Input中输入，多次调用只会在调用结束之后，等待500ms触发一次
</script>
</body>
</html>
если третий параметрimmediateПри передаче true вызов будет выполняться сразу, а последующие вызовы выполняться не будут, можете сами попробовать в коде
7 Дросселирование
Вызовите метод несколько раз и выполните его через определенный интервал времени
Реализация этого метода также скопирована из библиотеки Lodash.
/**
* 节流，多次触发，间隔时间段执行
* @param {Function} func
* @param {Int} wait
* @param {Object} options
*/
export function throttle(func, wait=500, options) {
//container.onmousemove = throttle(getUserAction, 1000);
var timeout, context, args
var previous = 0
if (!options) options = {leading:false,trailing:true}
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
var throttled = function() {
var now = new Date().getTime()
if (!previous && options.leading === false) previous = now
var remaining = wait - (now - previous)
context = this
args = arguments
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled
}
Третий параметр немного сложнее,options
- ведущий, функция вызывается в начале каждой задержки ожидания, значение по умолчанию — false
- трейлинг, функция вызывается в конце каждой задержки ожидания, значение по умолчанию равно true
Различные эффекты могут быть установлены в соответствии с различными значениями:
- leading-false, trailing-true: значение по умолчанию, т. е. функция не будет вызываться, пока не истечет задержка.
- ведущее-истинное, трейлинг-истинное: вызывается, когда задержка начинается и после того, как задержка заканчивается
- ведущее-истина, трейлинг-ложь: вызывается только при запуске задержки
пример:
<!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>
</head>
<body>
<input id="input" />
<script>
function onInput() {
console.log('1111')
}
const throttleOnInput = throttle(onInput)
document
.getElementById('input')
.addEventListener('input', throttleOnInput) //在Input中输入，每隔500ms执行一次代码
</script>
</body>
</html>
8. cleanObject
Удалите свойство, значение которого пусто (null, undefined, '') в объекте, например:
let res=cleanObject({
name:'',
pageSize:10,
page:1
})
console.log("res", res) //输入{page:1,pageSize:10} name为空字符串，属性删掉
Сценарий использования: внутренний интерфейс запроса списка, если поле не передается во внешнем интерфейсе, серверная часть не будет фильтровать в соответствии с этим полем, напримерnameЕсли вы не передадите это, вы толькоpageа такжеpageSizeФильтрация, но когда параметры внешнего запроса (vue или react) часто определяются так
export default{
data(){
return {
query:{
name:'',
pageSize:10,
page:1
}
}
}
}
const [query,setQuery]=useState({name:'',page:1,pageSize:10})
При отправке данных на бэкенд необходимо определить, является ли атрибут пустой строкой, а затем прописать параметры для бэкенда, эта логика извлечена.cleanObject, код реализован следующим образом
export const isFalsy = (value) => (value === 0 ? false : !value);
export const isVoid = (value) =>
value === undefined || value === null || value === "";
export const cleanObject = (object) => {
// Object.assign({}, object)
if (!object) {
return {};
}
const result = { ...object };
Object.keys(result).forEach((key) => {
const value = result[key];
if (isVoid(value)) {
delete result[key];
}
});
return result;
};
let res=cleanObject({
name:'',
pageSize:10,
page:1
})
console.log("res", res) //输入{page:1,pageSize:10}
Остальные восемь здесь:
Приведенные выше фрагменты кода были протестированы проектом и могут быть уверенно использованы в проекте.