前端代码 on 杨刚的个人网站

vue2 实现Dict 自动加载

Fri, 04 Jul 2025 00:00:00 +0000

url/sys-dict.js
#

接口请求，根据字典的 type 请求

axios实现post文件下载

Sat, 11 Nov 2023 00:00:00 +0000

<!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://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <button id="b">donwload</button>
</body>

</html>

// 处理Blob数据下载
function executeDownload(data, fileName) {
    if (!data) {
        return
    }
    let url = window.URL.createObjectURL(new Blob([data]));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    alert("download success")
}

let url = "http://example"
let params = {}

// 发送请求，接收文件数据并解析文件名
$("#b").click(function(){
    axios.post(
        url,
        params,
        {responseType: 'blob'}
    )
    .then(res => {
        let reader = new FileReader();
        let data = res.data;
        reader.onload = e => {
            if (e.target.result.indexOf('Result') != -1 && JSON.parse(e.target.result).Result == false) {
                // 进行错误处理
            } else {
                // 获取响应，前后端分离需要后端主动暴露响应头
                // resp.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
                let contentDisposition = res.headers['content-disposition'];
                if (contentDisposition) {
                    fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
                }
                executeDownload(data, fileName);
            }
        };
        reader.readAsText(data);
    })
})

js获取地址栏参数

Sat, 11 Nov 2023 00:00:00 +0000

//variable为地址栏中字段名
function getQueryVariable(variable){
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}

js中string和date互转

Sat, 11 Nov 2023 00:00:00 +0000

js字符串转换成Date
#

输入的时间格式为yyyy-MM-dd
#

function convertDateFromString(dateString) {
    var date = new Date(dateString.replace(/-/,"/")) 
    return date;
}

输入的时间格式为yyyy-MM-dd hh:mm:ss
#

function convertDateFromString(dateString) { 
    var arr1 = dateString.split(" "); 
    var sdate = arr1[0].split('-'); 
    var date = new Date(sdate[0], sdate[1]-1, sdate[2]); 
    return date;
}

Date转字符串
#

(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")

table2excel

Sat, 11 Nov 2023 00:00:00 +0000

1、项目导入依赖
#

下载地址：https://codechina.csdn.net/mirrors/rainabba/jquery-table2excel

vue实现全选

Sat, 11 Nov 2023 00:00:00 +0000

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                全选：
            </p>
            <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">{{checked}}
            <p>
                多个复选框：
            </p>
            <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">Runoob
            <input type="checkbox" id="google" value="Google" v-model="checkedNames">Google
            <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">taobao<br>
            选择的值为:{{checkedNames}}
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedNames: [],
                checkedArr: ["Runoob", "Taobao", "Google"]
            },
            methods: {
                changeAllChecked: function() {
                    if (this.checked) {
                        checkedNames = [];
                        this.checkedNames = this.checkedArr;
                    } else {
                        this.checkedNames = [];
                    }
                }
            },
            watch: {
                "checkedNames": function() {
                    if (this.checkedNames.length == this.checkedArr.length) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                }
            }
        })
    </script>
</html>

图片文件上传预览

Sat, 11 Nov 2023 00:00:00 +0000

//在input file内容改变的时候触发事件
$("#filed").change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
    var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
    var reader = new FileReader();
    //使用该对象读取file文件
    reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
    reader.onload=function(e){
        //读取成功后返回的一个参数e，整个的一个进度事件
        console.log(e);
        //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
        //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
    }
})

前端代码 on 杨刚的个人网站

vue2 实现Dict 自动加载

url/sys-dict.js #

axios实现post文件下载

js获取地址栏参数

js中string和date互转

js字符串转换成Date #

输入的时间格式为yyyy-MM-dd #

输入的时间格式为yyyy-MM-dd hh:mm:ss #

Date转字符串 #

table2excel

1、项目导入依赖 #

vue实现全选

图片文件上传预览

url/sys-dict.js
#

js字符串转换成Date
#

输入的时间格式为yyyy-MM-dd
#

输入的时间格式为yyyy-MM-dd hh:mm:ss
#

Date转字符串
#

1、项目导入依赖
#