easyui 导出execl表格 科学计数法精度丢失问题的解决方案

由于公司用项目用的easyui框架 所以很多easyui扩展也是要到的
今天就又碰到了一个坑 我努力填上希望后人能有更好的解决方案

问题 easyui中的datagrid 导出表格后精度丢失问题
扩展:

上图
在这里插入图片描述
可以看到 后3位都是000 已经丢失精度了
但是查看源文件代码
上图
在这里插入图片描述
源文件并未丢失
换过offices2010 还是不行 找了很多方法都不行

没办法重写扩展
原来扩展上图

  function toExcel(target, param){
        var filename = null;
        var rows = null;
        var footer = null;
        var caption = null;
        var worksheet = 'Worksheet';
        if (typeof param == 'string'){
            filename = param;
        } else {
            filename = param['filename'];
            rows = param['rows'];
            footer = param['footer'];
            caption = param['caption'];
            worksheet = param['worksheet'] || 'Worksheet';
        }
        var dg = $(target);
        var uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>'
        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

        var table = toHtml(target, rows, footer, caption);
        var ctx = { worksheet: worksheet, table: table };
        var data = base64(format(template, ctx));
        if (window.navigator.msSaveBlob){
            var blob = b64toBlob(data);
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var alink = $('<a style="display:none"></a>').appendTo('body');
            alink[0].href = uri + data;
            alink[0].download = filename;
            alink[0].click();
            alink.remove();
        }
    }

修改后的额代码

 function toExcel(target, param){
        var filename = null;
        var rows = null;
        var footer = null;
        var caption = null;
        var worksheet = 'Worksheet';
        if (typeof param == 'string'){
            filename = param;
        } else {
            filename = param['filename'];
            rows = param['rows'];
            footer = param['footer'];
            caption = param['caption'];
            worksheet = param['worksheet'] || 'Worksheet';
        }
        var table = toArray(target, rows);
        let str = '';
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let tv of table){
            for (let v of tv){
                str +=`${v==null|| v==undefined ?'':'\t'+ v},`;
            }
            str+='\n'
        }
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

结果图
在这里插入图片描述

用这个方法可解决科学计数法精度丢失问题

总结 感觉easyui 扩展没有问题 应该是wps 软件读取数据的时候自动转换成数字了
这里用’\t’ 防止了 转换数字的问题 还有就是’\t’加在后面也可以但是貌似有个空格 加载前段 wps加载数据的时候好像给过滤了 这样的达到了我们目的
用此方法减少了文件的大小

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui vue 数据表格下拉框的实现步骤如下: 1. 引入 easyui 和 vue 相关的 js 和 css 文件。 2. 创建一个 vue 实例,并定义一个数组用于存放下拉框的选项数据。 3. 在 HTML 中使用 easyui 的 datagrid 组件,并设置 columns 属性,其中需要使用 formatter 属性将某一列的数据转换为下拉框。 4. 在 formatter 中使用 easyui 的 combobox 组件,并将选项数据绑定到该组件中。 5. 在 vue 实例中定义一个方法,用于获取下拉框的选项数据,并将其赋值给选项数据数组。 6. 在 created 钩子函数中调用该方法,以获取初始的选项数据。 代码示例: HTML: ``` <div id="app"> <table id="datagrid" class="easyui-datagrid" :data="data"> <thead> <tr> <th field="name" width="50%">Name</th> <th field="gender" width="50%" formatter="genderFormatter">Gender</th> </tr> </thead> </table> </div> ``` JavaScript: ``` var app = new Vue({ el: '#app', data: { data: [] }, methods: { getGenderOptions: function() { // 获取下拉框选项数据 return [ { value: 'M', text: 'Male' }, { value: 'F', text: 'Female' } ]; }, genderFormatter: function(value, row) { // 将数据转换为下拉框 var options = this.getGenderOptions(); var selectedValue = row.gender; var html = '<select class="easyui-combobox" style="width:100%;" data-options="'; html += 'valueField: \'value\','; html += 'textField: \'text\','; html += 'data: ' + JSON.stringify(options) + '"'; html += '>'; for (var i = 0; i < options.length; i++) { var option = options[i]; var selected = option.value === selectedValue ? 'selected' : ''; html += '<option value="' + option.value + '" ' + selected + '>' + option.text + '</option>'; } html += '</select>'; return html; } }, created: function() { // 初始化数据 this.data = [ { name: 'John Doe', gender: 'M' }, { name: 'Jane Doe', gender: 'F' } ]; // 获取下拉框选项数据 var options = this.getGenderOptions(); // 在 easyui 加载完成后将选项数据绑定到下拉框中 $('#datagrid').datagrid({ onLoadSuccess: function(data) { $.each(data.rows, function(index, row) { var $combobox = $(this).datagrid('getPanel').find('td[field="gender"] div select'); $combobox.combobox('loadData', options); $combobox.combobox('setValue', row.gender); }); } }); } }); ``` 需要注意的是,在 easyui 加载完成后,需要将选项数据绑定到下拉框中,这使用了 jquery 的 each 方法遍历每一行数据,并通过 easyui 的 combobox 组件将选项数据绑定到对应的下拉框中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值