`
dbp_cn
  • 浏览: 86382 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

bootstrap table导出功能无效报错Uncaught INVALID_CHARACTER_ERR: DOM Exception 5和导出中文乱码问题

 
阅读更多

由于表格数据中含有中文导致的,在网页的开发者选项中报一个 Uncaught INVALID_CHARACTER_ERR: DOM Exception 5 问题。这个问题是由于BootStrap table 默认不支持中文,只会识别 ASCII字符,为了让bootstrap table 识别出中文,我们需要扩展版的 jQuery.base64.js 插件,让其可以识别出unicode 字符。

解决该问题的方法时,将默认的jquery.base64.js 文件内容替换成下面提供的扩展版:

jQuery.base64 = (function($) {

    // private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    // private method for UTF-8 encoding
    function utf8Encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    }

    function encode(input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = utf8Encode(input);
        while (i < input.length) {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output +
                keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                keyStr.charAt(enc3) + keyStr.charAt(enc4);
        }
        return output;
    }

    return {
        encode: function (str) {
            return encode(str);
        }
    };

}(jQuery));

 

分享到:
评论

相关推荐

    bootstrap table导出表格支持中文csv、pdf、txt等

    在“bootstrap table导出表格支持中文csv、pdf、txt等”这个主题中,我们将深入探讨如何在Bootstrap Table中实现中文内容的导出功能,以便用户能够以不同的格式保存和分享数据。 首先,让我们关注CSV(逗号分隔值)...

    bootstrap table导出表格

    Bootstrap Table 提供了导出表格为中文CSV的功能,这意味着它能够正确处理中文字符,避免在导出过程中出现乱码问题。 PDF(Portable Document Format)是一种用于保留文档格式和内容的文件格式,不论在哪种设备或...

    bootstrap table 导出文件 bootstrap-table-export.js和tableExport.js

    用于bootstrap数据表格的导出插件,在引入bootstrap其他主要js和css的前提下,再将bootstrap-table-export.js和tableExport.js引入。包里有两个版本的

    bootstrap-table导出合并单元格

    Bootstrap Table是一款基于...通过以上步骤,我们就能在使用Bootstrap Table时实现导出合并单元格的功能,提高数据展示的效率和质量。在实际开发中,可以根据项目需求调整和定制这些方法,以满足更复杂的需求。

    bootstrap table 导出下载

    总结来说,Bootstrap Table的导出功能是通过插件扩展实现的,可以方便地将表格数据导出为Excel格式,这对于数据分析和数据共享非常有帮助。在实际应用中,需要正确配置和引入相关资源,然后在JavaScript中初始化表格...

    bootstrap-table-demo-master (2).zip_Bootstrap Table_DEMO_MJ2J_bo

    总的来说,这个压缩包是一个学习和实践Bootstrap Table的绝佳资源,通过查看和运行示例,开发者可以快速掌握如何在自己的项目中应用和扩展Bootstrap Table,从而创建出用户友好、功能丰富的数据展示界面。...

    bootstraptable 导出excel需要的jar包

    描述中提到的"bootstrap-table-export.js"和"tableExport.min.js"是JavaScript文件,它们是BootstrapTable导出功能的前端实现部分。`bootstrap-table-export.js`是一个完整的非压缩版本,包含导出功能的源代码,方便...

    bootstrap table和tableExport导出支持中文的Excel和pdf等表格

    TableExport还提供了导出前和导出后的事件回调,可以自定义处理导出过程中的逻辑。例如,可以在导出前对数据进行预处理,或者在导出后执行某些操作。 6. 常见问题与调试: - 如果导出的文件打开时仍然乱码,可能...

    基于bootstrap table分页和数据导出

    Bootstrap Table是一个强大且灵活的前端组件,通过简单的配置和API调用,我们可以轻松实现数据的分页和导出功能。在实际项目中,根据需求调整其设置,可以极大地提升数据管理的效率和用户体验。同时,通过学习和理解...

    bootstrap table导出各种格式文件的JS.zip

    这个插件通过与`tableExport.js`配合工作,实现了数据的格式转换和导出功能。`tableExport.js`是一个独立的工具,它可以处理HTML表格并将其转换为不同的文件格式,便于数据的保存和分享。 在使用这两个库时,首先...

    tableExport导出pdf 中文 乱码解决

    在IT行业中,数据展示和导出是常见的需求,特别是在网页应用中。`tableExport`是一个jQuery插件,它允许用户方便地将HTML表格导出为多种格式,包括PDF。然而,当涉及到非英文字符,尤其是中文字符时,可能会遇到编码...

    完美解决bootstraptable父子表子表渲染问题

    BootstrapTable是一款基于Bootstrap框架的前端数据表格插件,它提供了丰富的功能,如排序、过滤、分页、自定义列等。在使用过程中,有时我们可能会遇到一个特定的需求,即实现父子表的功能,也就是在一个表格中嵌套...

    bootstrap-table-export导出xlsx格式.rar

    Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007) 先将bootstrap-table-export.js、tableExport.js、FileSaver.min.js、xlsx.core.min.js引入下载页面 修改bootstrap-table-export.js文件里...

    bootstrap-table-export.js bootstrap-table表格导出js

    bootstrap-table-export.js bootstrap-table表格导出js

    BootStrapTable excel 导出代码及离线文档

    仔细阅读这些文档,可以深入理解 BootStrapTable 的功能和使用技巧,以便更好地应用在实际项目中。 总之,BootStrapTable 的 Excel 导出功能结合了 TableExport 插件,使得开发者能够方便地为用户提供数据导出功能...

    Bootstrap Table 搜索框和查询功能

    知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...

    bootstrap导出table插件

    在Bootstrap中,表格(Table)是一种常见的数据展示方式,但默认情况下,Bootstrap表格并不具备直接导出数据的功能。为了实现这个功能,我们可以利用“bootstrap导出table插件”。 这个插件,正如其名,是为了增强...

    tableExport.js excel乱码解决方法

    自从上次用bootstrap table就一直没有解决导出excel的关题,网上找到的那更改tableExport.js和jquery.base64.js的方法虽然可以正常导出,但中文依旧乱码... 解决方法终归是有的....现将文件分享给大家. 里面有table...

    bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

Global site tag (gtag.js) - Google Analytics