1.后端返回文件流下载excel操作？
// 接口地址
export const ecoResProjectExportExcel = data => request({ url: '/ecoResProject/exportExcel', method: 'post', data, responseType: 'arraybuffer' })
/* 数据导出 */
clickexport () {
let deletearr = [...this.tableSelection]
this.loadingDc = true
dataEconomicsExportExcel({
aeIds: deletearr.map(val => val.aeId)
}).then(res => {
if (res.status === 200) {
const tempBlob = new Blob([ res.data ], { type: 'application/json' })
// 通过 FileReader 读取这个 blob
const reader = new FileReader()
reader.onload = e => {
const res1 = e.target.result
// 此处对fileReader读出的结果进行JSON解析
// 可能会出现错误，需要进行捕获
try {
const json = JSON.parse(res1)
for (const key in json) {
if (json[key] === 1009) {
this.$router.push({
path: '/login'
})
}
}
} catch (err) {
this.loadingDc = false
const link = document.createElement('a')
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.href = config.eprUrl +'/'+ res.data.data
// link.download = res.headers['content-disposition'].split('')[1].split(';')[1] // 下载后文件名
link.download = '社会经济' + res.headers['content-disposition'].split(';')[1].split('=')[1]
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
this.tableSelection = []
}
}
// 将blob对象以文本的方式读出，读出完成后将会执行 onload 方法
reader.readAsText(tempBlob)
} else {
this.$Notice.info({
title: '导出失败'
})
}
}).catch((error) =>
console.log(error)
)
},
2.经纬度和度分秒互相转换？
/* 转换经纬度为度分秒 */
export const cacuLonLat = a => {
if (a === undefined || a === null) {
return undefined
} else {
let degree = parseInt(a)
let min = parseInt((a - degree) * 60)
let sec = ((a - degree) * 3600 - min * 60).toFixed(2)
let min00 = '00' + min
min = min00.substring(min00.length - 2, min00.length)
return degree + '°' + min + '′' + sec + '″'
}
}
// 度分秒转经纬度 48°33´13.70"
export const DegreeConvertBack = val => {
let du = val.split('°')[0]
let fen = val.split('°')[1].split('´')[0]
let miao = val.split('°')[1].split('´')[1].split('"')[0]
return parseFloat(Math.abs(du)) + parseFloat((Math.abs(fen) / 60) + parseFloat(Math.abs(miao) / 3600))
}
3.数字每3位加，？
/* 将数字每三位加 ， */
export const toThousands = (num) => {
let result = ''
let counter = 0
num = (num || 0).toString()
for (let i = num.length - 1; i >= 0; i--) {
counter++
result = num.charAt(i) + result
if (!(counter % 3) && i !== 0) {
result = ',' + result
}
}
return result
}
4.日期转换格式？
/* 日期格式装换 */
export const renderTime = date => {
if (date === null || date === undefined|| date === '') {
return ''
}
let d = new Date(date)
let month = d.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let date1 = d.getDate()
if (date1 < 10) {
date1 = '0' + date1
}
let times = d.getFullYear() + '-' + month + '-' + date1
return times
}
/* 年份格式装换 */
export const renderYearTime = date => {
if (date === null || date === undefined) {
return ''
}
let d = new Date(date)
let times = d.getFullYear()
return times
}
/* 日期格式装换-- 精确到秒 */
export const renderDateTime = date => {
if (date === null || date === undefined) {
return ''
}
let d = new Date(date)
let times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
return times
}
5.v-resize监控div长宽的变化？
// vue中的自定义指令
// v-resize监控div长宽的变化
Vue.directive('resize', {
bind (el, binding) {
let width = ''
let height = ''
function get () {
const style = document.defaultView.getComputedStyle(el)
if (width !== style.width || height !== style.height) {
binding.value({ width, height })
}
width = style.width
height = style.height
}
el.__vueReize__ = setInterval(get, 200)
},
unbind (el) {
clearInterval(el.__vueReize__)
}
})
6.判断一个数组对象里面的值是否为空？
judgeObjectComplete (ObjectValue) {
let flag = new Boolean()
flag = true
for (let key in ObjectValue) {
if (ObjectValue[key]) {
return
} else {
flag = false
}
}
if (!flag) {
return false
} else {
return true
}
},
judgeListComplete (list) {
let isNotComplete = list.findIndex(item => {
return this.judgeObjectComplete(item) === false
})
console.log(isNotComplete)
if (isNotComplete > -1) {
return false
} else {
return true
}
},
// 调用 this.judgeListComplete() 返回布尔值（true或 false）
7.常用的格式校验？
//校验手机号码
export function isSpecialPhone(num) {
return /^1[2,3,4,5,7,8]\d{9}$/.test(num)
}
//校验中英文姓名
export function isName(name) {
return /[a-zA-Z\u4E00-\u9FA5]+$/.test(name)
}
// 邮箱的校验
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
// 校验身份证号码
/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
// 经度的校验 经度： -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
/^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/
// 纬度的校验 纬度： -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
/^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/
// 纯文字校验
let reg = /^([\u4e00-\u9fa5])*$/;
8.倒计时（默认是当前时间）？
* 倒计时（默认开始时间为当前时间）
* @param endTime 结束时间
* @returns 时间对象
*/
const getEndTime = (startTime, endTime) => {
const startDate = startTime || new Date(); //开始时间，当前时间
const endDate = new Date(endTime); //结束时间，需传入时间参数
const t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
let d = 0,
h = 0,
m = 0,
s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 3600 / 24) > 10 ? Math.floor(t / 1000 / 3600 / 24) : '0' + Math.floor(t / 1000 / 3600 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24) > 10 ? Math.floor(t / 1000 / 60 / 60 % 24) > 10 : '0' + Math.floor(t / 1000 / 60 / 60 % 24) > 10;
m = Math.floor(t / 1000 / 60 % 60) > 10 ? Math.floor(t / 1000 / 60 % 60) : '0' + Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60) > 10 ? Math.floor(t / 1000 % 60) : '0' + Math.floor(t / 1000 % 60);
}
return {
day: d,
hour: h,
minute: m,
second: s
}
}
9.压缩图片？
dealImage (path, obj, callback) {
var img = new Image()
img.src = path
img.onload = function () {
var that = this
// 默认按比例压缩
var w = that.width
var h = that.height
var scale = w / h
w = obj.width || w
h = obj.height || w / scale
var quality = 0.5 // 默认图片质量为0.7
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 创建属性节点
var anw = document.createAttribute('width')
anw.nodeValue = w
var anh = document.createAttribute('height')
anh.nodeValue = h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(that, 0, 0, w, h)
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality)
// 回调函数返回base64的值
callback(base64)
}
}
10.图片转成base64？
getImgData (img, dir, next) {
var image = new Image()
image.onload = function () {
var degree = 0
var drawWidth
var drawHeight
var width
var height
drawWidth = this.naturalWidth
drawHeight = this.naturalHeight
// 以下改变一下图片大小
var canvas = document.createElement('canvas')
canvas.width = width = drawWidth
canvas.height = height = drawHeight
var context = canvas.getContext('2d')
// 判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
switch (dir) {
// iphone横屏拍摄，此时home键在左侧
case 3:
degree = 180
drawWidth = -width
drawHeight = -height
break
// iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
case 6:
canvas.width = height
canvas.height = width
degree = 90
drawWidth = width
drawHeight = -height
break
// iphone竖屏拍摄，此时home键在上方
case 8:
canvas.width = height
canvas.height = width
degree = 270
drawWidth = -width
drawHeight = height
break
}
// 使用canvas旋转校正
context.rotate((degree * Math.PI) / 180)
context.drawImage(this, 0, 0, drawWidth, drawHeight)
// 返回校正图片
next(canvas.toDataURL('image/jpeg', 0.8))
}
image.src = img
}
11.纯前端的表格转excel
<script>
npm install file-saver --save // 安装
import FileSaver from "file-saver"
npm install xlsx // 安装
import XLSX from "xlsx"
exportExcel() {
/*获取表格数据 */
var wb = XLSX.utils.book_new()
var centers = XLSX.utils.table_to_sheet(document.querySelector("#center_table"))
var products = XLSX.utils.table_to_sheet(document.querySelector("#product_table"))
var center_month = XLSX.utils.table_to_sheet(document.querySelector("#center_table_month"))
var departs = XLSX.utils.table_to_sheet(document.querySelector("#depart_table"))
/* 添加多个工作薄，如果只有一个，则只写一个 */
XLSX.utils.book_append_sheet(wb, center_month, "各中心月度费用统计")
XLSX.utils.book_append_sheet(wb, centers, "各中心申请费用类型统计")
XLSX.utils.book_append_sheet(wb, products, "各业务产品申请费用统计")
XLSX.utils.book_append_sheet(wb, departs, "各部门申请费用统计")
/* 使用iview表格时删除最后一行 */
for (let key in centers) {
if (key.includes('A')) {
if (one[key].v === '暂无筛选结果') {
delete one[key]
}
}
}
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
})
try {
FileSaver.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
// 设置导出文件名称 xxx.xlsx
"中心申请费用类型统计.xlsx"
)
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout)
}
return wbout
},
</script
20.解析Blob内容并下载？
/**
* 解析blob响应内容并下载
* @param {*} res blob响应内容
* @param {String} mimeType MIME类型
*/
export function resolveBlob(res, mimeType) {
const aLink = document.createElement('a')
var blob = new Blob([res.data], { type: mimeType })
// //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
var contentDisposition = decodeURI(res.headers['content-disposition'])
var result = patt.exec(contentDisposition)
var fileName = result[1]
fileName = fileName.replace(/\"/g, '')
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', fileName) // 设置下载文件名称
document.body.appendChild(aLink)
aLink.click()
document.body.appendChild(aLink)
}
21.数组按首字母进行排序？
第一种方法：
obj.sort((a,b)=>{a.pinyin.charCodeAt(0)-b.pinyin.charCodeAt(0)})
第二种方法：
sort((a,b)=>a.pinyin.localeCompare(b.pinyin))
