【一种使用浏览器读取本地excel、josn等数据文件的方法】Python+JavaScript+HTML实现

谁借莪１个温暖的怀抱￠ 2024-03-08 08:15 33阅读 0赞

#### 一种使用浏览器读取本地excel、josn等数据的文件方法 ####

*  一、背景
 *  二、解决思路
 *  三、具体实现
 *   *  （一）使用python读取本地文件并转换为json格式的.js文件
     *  （二）在HTML文件头使用\`<script>\`标签引入转换后的.js数据文件
     *  （三）使用python打开浏览器加载对应的HTML文件
 *  四、小结

## 一、背景 ##

> 一般来说，为了网络访问安全，浏览器是不能直接加载本地文件的，IE内核的浏览器提供了AX控件实现本地文件的读取，Chrome 86 版本后也提供了相应的API，但都存在使用限制和兼容性问题。有时开发者只是想利用浏览器编制一些简单的脚本完成一些任务，不想学习C、C++、Python生成exe这么大动作，`例如使用JavaScript脚本读取本地一个excel文件进行统计分析`。但由于浏览器无法使用本地文件这个限制，只好放弃。本文讨论研究一种`非IE内核浏览器读取本地excel数据的方法`，绕开这个限制。

为了实现这个目标这里使用到了Python、JavaScript、json、HTML等知识，同时博主也是通过学习其他文章找了这种解决方案。

相关文章详见：  
[https://blog.csdn.net/qq\_41581588/article/details/129681572][https_blog.csdn.net_qq_41581588_article_details_129681572]  
[https://blog.csdn.net/qq\_30337695/article/details/51788007][https_blog.csdn.net_qq_30337695_article_details_51788007]

## 二、解决思路 ##

把本地文件的数据转换为json格式数据

.js文件将通过script标签插入HTML文件

1.使用python读取本地文件

2.把json格式数据保存为.js文件

3.使用python在HTML文件头中写入.js文件,编写读取.js文件json数据的JavaScript代码

4.使用python打开浏览器加载对应的HTML文件

问题的解决思路如下：

1.  使用python读取本地文件并转换为json格式的.js文件;
2.  在HTML文件头使用`<script>`标签引入转换后的.js数据文件;
3.  使用python打开浏览器加载对应的HTML文件。

## 三、具体实现 ##

### （一）使用python读取本地文件并转换为json格式的.js文件 ###

这里参考了网上的python读取本地文件代码，已读取excel为例子，使用了json库、xlrd2库编写了读取单个excel文件转换为json数据格式的.js文件。其中`参数path`为`待读取的excel文件路径`，`参数name`为`转换后保存的.js文件名`。主要代码如下：

import os
    import json
    import xlrd2
    import excel2json
    import webbrowser
    
    fileTypeArray = [".xlsx", ".xls"]
    def readExecl(path, name):
        print(path)
        workbook = xlrd2.open_workbook(path)
        sheet2_name = workbook.sheet_names()[0]
        sheet = workbook.sheet_by_name(sheet2_name)  
        # sheet索引从0开始
        # sheet的名称，行数，列数
        # print sheet.name,sheet.nrows,sheet.ncols
    
        adict = {
        }
    
        for i in range(1, sheet.nrows):
            data = {
        }
            for j in range(0, sheet.ncols):
                value = TransformationType(sheet.cell_value(i, j))
                if isinstance(value, str):
                    if isJsonString(value):
                        data[TransformationType(sheet.cell_value(0, j))] = eval(value)
                    else:
                        data[TransformationType(sheet.cell_value(0, j))] = value
                else:
                    data[TransformationType(sheet.cell_value(0, j))] = value
                adict[TransformationType(sheet.cell_value(i, 0))] = data
    
        data = json.dumps(adict, indent=1, ensure_ascii=False)
        excel_data = "data = " + data
        _json_save_path = os.getcwd() + "/" + name + '.js'
        f = open(_json_save_path, 'w', encoding='utf-8')
        f.write(excel_data)
        f.close()
        print("already create json:" + path)
        return data, _json_save_path
    
    def isJsonString(str):
        try:
            eval(str)
        except Exception as e:
            return False
        return True
    
    
    def TransformationType(var):
        if isinstance(var, float):  # type(var) == 'float':
            str1 = int(var)
        elif isinstance(var, str):  # type(var) == 'unicode':
            str1 = var
        else:
            raise Exception("type is not deal")
            str1 = var
        return str1

然后编制run函数测试上面的代码，读取当前目前下的`题库.xls`文件，输出`excel_data.js`文件，run函数代码如下：

def run():
        _file_path = os.getcwd() + "/" + "题库.xls"
        _filename = os.path.basename(_file_path)
        _json_data = excel2json.readExecl(_file_path, "excel_data")
    
    if __name__ == '__main__':
        run()

运行结果如下，`题库.xls`转换成了`excel_data.js`。

![在这里插入图片描述][8ba9ead33db04af2b676ce3528d371d4.png]

打开`题库.xls`和`excel_data.js`，可以看到excel里面的每一行转换为json的对象数据。

![在这里插入图片描述][33c167ce240a41deac0be28eb368f0cb.png]

### （二）在HTML文件头使用`<script>`标签引入转换后的.js数据文件 ###

有了`.js文件`，就可以在HTML文件头使用`<script>`标签引入转换后的.js数据文件，这里通过使用`src="excel_data.js"`实现。具体代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>读取excel</title>
        <script type="text/javascript" src="excel_data.js"></script>
    </head>
    <body>
        <script type="text/javascript">
          let data_list = Object.values(data)
    	  data_len = data_list.length
    	  console.log(data_list)
    	  console.log(data_len)
        </script>
    </body>
    </html>

浏览器输出结果如下，把excel的数据都打印到控制台了，证明读取本地excel文件成功了，后续可以根据需求统计和展示excel的数据。

![在这里插入图片描述][fac07ca7ee8b45069798e1f5be9128f8.png]

### （三）使用python打开浏览器加载对应的HTML文件 ###

最后就是刚才两个步骤的自动化，使用python自动把excel转为.js文件，调用本地浏览器打开对应的HTML，实现整个流程自动化。具体代码如下：

def run():
        _file_path = os.getcwd() + "/" + "题库.xls"
        _filename = os.path.basename(_file_path)
        _json_data = excel2json.readExecl(_file_path, "excel_data")
        _url = os.getcwd() + "/" + "index.html"
        webbrowser.open(_url)
    
    if __name__ == '__main__':
        run()

## 四、小结 ##

使用浏览器读取本地文件其实有很多实现方式，包括使用Node.js和Electron框架等技术，但这些都使用起来多少有点难度和技术门槛，本文使用简单的Python+JavaScript+HTML技术实现，满足一些小场景的需求。完整代码如下：

[下载地址：【一种使用浏览器读取本地excel、josn等数据文件的方法】Python+JavaScript+HTML实现][excel_josn_Python_JavaScript_HTML]

另外，原来博主基于IE内核做了一个考试刷题工具，现在也改成使用本方法实现了，终于可以在各种浏览器运行，不再需要考虑兼容性等问题。  
[下载地址：Python+JavaScript+html编写的免费刷题工具，可以实现浏览器读取本地excel文件，自定义题库][Python_JavaScript_html_excel]

[https_blog.csdn.net_qq_41581588_article_details_129681572]: https://blog.csdn.net/qq_41581588/article/details/129681572
[https_blog.csdn.net_qq_30337695_article_details_51788007]: https://blog.csdn.net/qq_30337695/article/details/51788007
[8ba9ead33db04af2b676ce3528d371d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/1b8e7e87794c4d9aa052b3efe2b759d4.png
[33c167ce240a41deac0be28eb368f0cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/6cc8fff3864144b79386292099fa278e.png
[fac07ca7ee8b45069798e1f5be9128f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/8b384d079af64c7cac06367f1de97681.png
[excel_josn_Python_JavaScript_HTML]: https://download.csdn.net/download/qq616491978/88326898
[Python_JavaScript_html_excel]: https://download.csdn.net/download/qq616491978/87935414