「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

在上一篇文章Vue导入文件封装中介绍了文件的导入功能，需要的小伙伴可以去看看哦！有了导入，自然就需要文件的导出和下载功能啦，一般也是封装一个工具类，在需要的页面中调用，这样就很方便啦。

文件的导出/下载

1.创建form对象

document.createElement('form')

2.设置样式

 form.setAttribute('style', 'display:none');

3.设置上传类型

form.setAttribute('method', method);

4.设置上传的url

 form.setAttribute('action', url);

5.设置传递的参数

let input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = postData[key];
form.appendChild(input);

6.全部代码，按需引入

/**
 * 导出表格
 */
export function doExportExcel(url, postData, { method = 'post' } = {}) {
    let form = document.createElement('form');
    form.setAttribute('style', 'display:none');
    form.setAttribute('method', method);
    form.setAttribute('action', url);
    for (let key in postData) {
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = postData[key];
        form.appendChild(input);
    }
    let body = document.createElement('body');
    body.style.display = "none";
    document.body.appendChild(form);
    form.submit();
    form.remove();
}

7.组件调用

import { doExportExcel } from '@/utils/common.js';
doExportExcel(url, postData)// 先引用再调用

文件的下载

如果后台接口是post的话，可以用上面的导出的封装，如果是get的话，可以直接用a链接，设置href下载，更加方便。
window.open(url) get请求下载文件

数字转中文

通常前端页面展示的时候UI设计的会出现展示中文的星期几，周几等等，但是一般后端会直接返回阿拉伯数字，这时候就需要前端自行转化了，写成一个公共方法就很方便啦！

const intToChinese = (value) => {
    const str = String(value);
    const len = str.length-1;
    const idxs = ['','十','百','千','万','十','百','千','亿','十','百','千','万','十','百','千','亿'];
    const num = ['零','一','二','三','四','五','六','七','八','九'];
    return str.replace(/([1-9]|0+)/g, ( $, $1, idx, full) => {
        let pos = 0;
        if($1[0] !== '0'){
            pos = len-idx;
            if(idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){
                return idxs[len-idx];
            }
            return num[$1[0]] + idxs[len-idx];
        } else {
            let left = len - idx;
            let right = len - idx + $1.length;
            if(Math.floor(right / 4) - Math.floor(left / 4) > 0){
                pos = left - left % 4;
            }
            if( pos ){
                return idxs[pos] + num[$1[0]];
            } else if( idx + $1.length >= len ){
                return '';
            }else {
                return num[$1[0]]
            }
        }
    });
}

数字转大写金额

项目中有时候需要展示金额，而后台返回的是数字，就可以在common.js中封装一个工具类，需要转的时候直接调用就可以了

const digitUppercase = (n) => {
    const fraction = ['角', '分'];
    const digit = [
        '零', '壹', '贰', '叁', '肆',
        '伍', '陆', '柒', '捌', '玖'
    ];
    const unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
    ];
    n = Math.abs(n);
    let s = '';
    for (let i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (let i = 0; i < unit[0].length && n > 0; i++) {
        let p = '';
        for (let j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
};

Vue下载/导出封装