网页json数据转换成csv数据并提供下载链接

言

数据相关网站有时需要提供数据下载链接，以便于用户下载数据。网页上尝试用json数据，但是用户

环境

Windows10
jquery2.1.4

方法

HTML文件中加入下载标签
<div id="download"></div>
假设已有json数据ret：

ret=[{name: "motor1", temp1: 48, temp2: 49, time: "2018-05-17 10:21:53", length: 10},
{name: "motor1", temp1: 48, temp2: 48, time: "2018-05-17 10:21:30", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:50", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:49", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:47", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:46", length: 10},
{name: "motor1", temp1: 64, temp2: 64, time: "2018-05-15 16:52:36", length: 10},
{name: "motor1", temp1: 64, temp2: 64, time: "2018-05-15 16:51:55", length: 10},
{name: "motor1", temp1: 64, temp2: 70, time: "2018-05-15 16:19:53", length: 10},
{name: "motor1", temp1: 64, temp2: 72, time: "2018-05-15 16:18:18", length: 10}]
1
2
3
4
5
6
7
8
9
10
11

使用json转csv的库json2csv, 下载后导入库
<script src="/static/js/json2csv.js" type="text/javascript"></script>
json数据转cvs并生成下载链接
<script>
var myData=[]，
length=10;
// 我的json数据从后端传过来的，需要导入一下，否则读不到，大家根据情况使用，可删掉
for(var i=0; i<length; i++){
myData.push(ret[i]);
}
// 将json数据转化为csv
var fields=['name', 'temp1', 'temp2', 'time'];
var result=json2csv({ data: myData, fields: fields });
// 创建下载链接
var data="data:text/csv;charset=utf-8," + encodeURIComponent(result); // 格式化数据
var aa=$("<a></a>").text("下载数据"); // 创建<a>标签
aa.attr('href', data); // 给<a>标签添加href属性
aa.attr('download', 'data.csv'); // 给<a>标签创建download属性
$("#download").append(aa); // 插入标签
</script>

章开始之前，我们先来看一个常见的问题：

接到一个任务，需要抓取某个网站上的数据内容，网页上需要输入搜索关键词，然后点击搜索按钮，等待页面加载完毕，获取网页上的搜索结果，而每一个搜索结果项，都需要点击展开才能查看到具体内容。

对于该问题，我们可以从网上找到一些解决问题的途径，但是大都不是很全面。这里小编对所有可能出现的问题做了一次调研，并汇总成如下的解决方案，希望对大家有所帮助。

首先，我们先来汇总一下python生态下爬取网站数据需要用到的工具。

1，selenium chromedriver，这个标准的自动化工具，可以帮助我们从后台操控google浏览器，并能模拟鼠标移动和点击事件，配合xpath快速定位网页元素，从根本上解放了我们的双手。

2，ajax-hook, 这个是用来拦截xhr的钩子，可以快速获取网站服务器的响应内容，而无需我们被动地从网页上来获取。

明确了我们处理任务的可用资源，下一步就是各种踩坑了。

这里小编先列举一下，我所遇到的坑：

1，selenium的webdriver加载网页，怎么判断页面是否加载完全，使用

wait=WebDriverWait(self.driver, timeout=10)

wait.until(lambda my_driver: my_driver.execute_script('return document.readyState')=='complete')

发现这种方案不可行，遇到动态网页异步加载就gameover，不通用，可行的方案应该wait for webelement loaded，也就是等待你所关注的网页元素加载完毕才行。

2，xpath的相对路径查找，是带了position的向下查找，也就是说每次调用xpath find, 其position就往下移动一次。所以如果用xpath在同一个流程调用多次只有第一次可以找到元素，后面都是失败的。所以对于需要反复查找的元素，最好要用绝对路径，获取xpath绝对路径很简单

打开浏览器的开发者工具，点击左上角的小箭头，移动鼠标到具体某个按钮或者输入框点击一下就可以定位到html的标签源代码位置，鼠标右键，Copy xpath即可

3，怎么截获并过滤xhr请求，将响应内容保存下来，而不会造成内存暴涨。

from selenium import webdriver

from selenium.webdriver.chrome.options import Options

from selenium.webdriver.support.ui import WebDriverWait

chrome_options=Options()

chrome_options.add_argument("--disable-extensions")

chrome_options.add_argument("--disable-gpu")

chrome_options.add_argument("--headless")

chrome_options.add_argument("--no-sandbox")

prefs={

'download.default_directory': os.getenv('OS_LOG_PATH')

}

chrome_options.add_experimental_option('prefs', prefs)

capabilities=webdriver.DesiredCapabilities().CHROME

capabilities['acceptSslCerts']=True

driver=webdriver.Chrome(options=chrome_options, desired_capabilities=capabilities)

我们先来初始化一下webdriver，网上有很多资料，但是都不是很全面，上面是我整理的初始化内容，大家按照这个来，就不会有问题。

截获https/http响应body内容，网上大致有三种实现思路：

1，开启browser, performance log，再根据requestId，调用chrome-devtools protocal Network.getResponseBody, 获取响应body。但是问题来了，我们需要大量采集response，而performance log都是存在内存中，还需要我们人为清理，并且performance log采集的信息很杂，没有过滤的入口提供给开发者。而且最烦的是，还需要去解析log，需要为了查询一个repsonse body，有时候需要人为过滤N行日志。。。。。（直接无语凝噎）

2，使用代理，网上传的最多的是browsermob-proxy，但是这个玩意很无语的是只提供response的统计信息，不返回实质性的response body内容，配置各种参数都不会返回content.text字段，气得跳脚，去github上看源码发现，text被下放了，当前稳定版本都会省略这个参数。所以你辛辛苦苦安装proxy，调整ssl参数，在python中配置各种proxy har，设置captureContent，结果却得不到response body，不自觉就口吐芬芳了。所以想要其返回text字段，你需要改它的源码，改源码不难，但是很烦。

3，使用ajax-hook, 这个方案的思路是：在源网页加载之前，实现一个XMLHttpRequest的代理对象，然后覆盖全局的XMLHttpRequest，这样一但上层调用 new XMLHttpRequest这样的代码时，其实创建的是Ajax-hook的代理对象实例

我们先新建一个hook.js脚本

(function(console){

console.save=function(data, filename){

if(!data) {

console.error('Console.save: No data')

return;

}

if(!filename) filename='console.json'

if(typeof data==="object"){

data=JSON.stringify(data, undefined, 4)

}

var blob=new Blob([data], {type: 'text/json'}),

e=document.createEvent('MouseEvents'),

a=document.createElement('a')

a.download=filename

a.href=window.URL.createObjectURL(blob)

a.dataset.downloadurl=['text/json', a.download, a.href].join(':')

e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

a.dispatchEvent(e)

}

})(console)

ah.proxy({

//请求发起前进入

onRequest: (config, handler)=> {

console.log(config.url)

handler.next(config);

//请求发生错误时进入，比如超时；注意，不包括http状态码错误，如404仍然会认为请求成功

onError: (err, handler)=> {

console.log(err.type)

handler.next(err)

//请求成功后进入

onResponse: (response, handler)=> {

if (response.config.url.startsWith('api/apps') && response.config.url.endsWith('/search')) {

timestamp=new Date().getTime().toString()

console.save(response.response, timestamp+'.json')

}

handler.next(response)

}

})

该hook.js是我改良之后的，可以拿来直接用，功能就是根据response.config.url过滤我们需要的请求，并将response body保存到本地的json文件中，注意到上文中webdriver初始化的字段中有个选项，download.default_directory

prefs={

'download.default_directory': os.getenv('OS_LOG_PATH')

}

os.getenv('OS_LOGPATH')这个是获取环境变量，环境变量的值为我们需要保存response body的文件夹路径，每一个response body都是一个json文件。大功告成！！简洁明了，不需要依赖于其他任何东西，就可以实现了，长舒一口气。

总结经验：

1，不要盲目使用网上的源码，也不要死扣一种解决方案，不要轻易就相信网上的博文资料而不亲自实践，人云亦云。

2，解决问题最有效的途径是：看清问题的本质，从问题的内部挖掘出解决文图的思路，拆解成更容易解决的小问题。当一个问题关联了太多变量因素时，要学会控制单一变量，用排除法一步步解决，省时省力，不容易走弯路。

者 | 猪哥

责编 | maozz

JSON的诞生原因是因为XML整合到HTML中各个浏览器实现的细节不尽相同，所以道格拉斯·克罗克福特（Douglas Crockford）和奇普·莫宁斯达（Chip Morningstar）一起从JS的数据类型中提取了一个子集，作为新的数据交换格式，因为主流的浏览器使用了通用的JavaScript引擎组件，所以在解析这种新数据格式时就不存在兼容性问题，于是他们将这种数据格式命名为 “JavaScript Object Notation”，缩写为 JSON，由此JSON便诞生了！

今天我们来学习一下JSON的结构形式、数据类型、使用场景以及注意事项吧！

JSON格式

上面我们知道JSON是从JavaScript的数据类型中提取出来的子集，那JSON有几种结构形式呢？又有哪些数据类型呢？他们又分别对应着JavaScript中的哪些数据类型呢？

JSON的2种结构形式，键值对形式和数组形式。

举了一个JSON的实例，就是键值对形式的，如下：

{
"person": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

这种结构的JSON数据规则是：一个无序的“‘名称/值’对”集合。一个对象以 {左括号开始， }右括号结束。每个“名称”后跟一个 :冒号；“‘名称/值’ 对”之间使用 ,逗号分隔。

因为大多数的时候大家用的JSON可能都是上面那种key-value形式，所以很多人在讲解JSON的时候总是会忽略数组形式，这一点是需要注意的。

那JSON的数组形式是怎么样的呢？举一个实例吧！

["pig", 18, "man", "江西省抚州市崇仁县"]

数组形式的JSON数据就是值（value）的有序集合。一个数组以 [左中括号开始， ]右中括号结束。值之间使用 ,逗号分隔。

JOSN的6种数据类型

上面两种JSON形式内部都是包含value的，那JSON的value到底有哪些类型，而且上期我们说JSON其实就是从Js数据格式中提取了一个子集，那具体有哪几种数据类型呢？

string：字符串，必须要用双引号引起来。
number：数值，与JavaScript的number一致，整数（不使用小数点或指数计数法）最多为 15 位，小数的最大位数是 17。
object：JavaScript的对象形式，{ key:value }表示方式，可嵌套。
array：数组，JavaScript的Array表示方式[ value ]，可嵌套。
true/false：布尔类型，JavaScript的boolean类型。
：空值，JavaScript的。

以上数据形式图片来源JSON官方文档：http://www.json.org/json-zh.html

JSON使用场景

介绍完JSON的数据格式，那我们来看看JSON在企业中使用的比较多的场景。

接口返回数据和序列化。JSON用的最多的地方莫过于Web了，现在的数据接口基本上都是返回的JSON，具体细化的场景有：

Ajxa异步访问数据
RPC远程调用
前后端分离后端返回的数据
开放API，如百度、高德等一些开放接口
企业间合作接口

这种API接口一般都会提供一个接口文档，说明接口的入参、出参等，

一般的接口返回数据都会封装成JSON格式，比如类似下面这种

{
"code": 1,
"msg": "success",
"data": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

程序在运行时所有的变量都是保存在内存当中的，如果出现程序重启或者机器宕机的情况，那这些数据就丢失了。一般情况运行时变量并不是那么重要丢了就丢了，但有些内存中的数据是需要保存起来供下次程序或者其他程序使用。

保存内存中的数据要么保存在数据库，要么保存直接到文件中，而将内存中的数据变成可保存或可传输的数据的过程叫做序列化，在Python中叫pickling，在其他语言中也被称之为serialization，marshalling，flattening等等，都是一个意思。

正常的序列化是将编程语言中的对象直接转成可保存或可传输的，这样会保存对象的类型信息，而JSON序列化则不会保留对象类型！

为了让大家更直观的感受区别，猪哥用代码做一个测试，大家一目了然

Python对象直接序列化会保存class信息，下次使用loads加载到内存时直接变成Python对象。
JSON对象序列化只保存属性数据，不保留class信息，下次使用loads加载到内存可以直接转成dict对象，当然也可以转为Person对象，但是需要写辅助方法。

对于JSON序列化不能保存class信息的特点，那JSON序列化还有什么用？答案是当然有用，对于不同编程语言序列化读取有用，比如：我用Python爬取数据然后转成对象，现在我需要将它序列化磁盘，然后使用Java语言读取这份数据，这个时候由于跨语言数据类型不同，所以就需要用到JSON序列化。

存在即合理，两种序列化可根据需求自行选择！

最后就是生成Token和配置文件

首先声明Token的形式多种多样，有JSON、字符串、数字等等，只要能满足需求即可，没有规定用哪种形式。

JSON格式的Token最有代表性的莫过于JWT（JSON Web Tokens）。

随着技术的发展，分布式web应用的普及，通过Session管理用户登录状态成本越来越高，因此慢慢发展成为Token的方式做登录身份校验，然后通过Token去取Redis中的缓存的用户信息，随着之后JWT的出现，校验方式更加简单便捷化，无需通过Redis缓存，而是直接根据Token取出保存的用户信息，以及对Token可用性校验，单点登录更为简单。

使用JWT做过app的登录系统，大概的流程就是：

用户输入用户名密码
app请求登录中心验证用户名密码
如果验证通过则生成一个Token，其中Token中包含：
用户的uid、Token过期时间、过期延期时间等，然后返回给app
app获得Token，保存在cookie中，下次请求其他服务则带上
其他服务获取到Token之后调用登录中心接口验证
验证通过则响应

JWT登录认证有哪些优势：

性能好：服务器不需要保存大量的session
单点登录（登录一个应用，同一个企业的其他应用都可以访问）：使用JWT做一个登录中心基本搞定，很容易实现。
兼容性好：支持移动设备，支持跨程序调用，Cookie 是不允许垮域访问的，而 Token 则不存在这个问题。
安全性好：因为有签名，所以JWT可以防止被篡改。更多JWT相关知识自行在网上学习，本文不过多介绍！

说实话JSON作为配置文件使用场景并不多，最具代表性的就是npm的package.json包管理配置文件了，下面就是一个npm的package.json配置文件内容。

{
"name": "server", //项目名称
"version": "0.0.0",
"private": true,
"main": "server.js", //项目入口地址，即执行npm后会执行的项目
"scripts": {
"start": "node ./bin/www" ///scripts指定了运行脚本命令的npm命令行缩写
},
"dependencies": {
"cookie-parser": "~1.4.3", //指定项目开发所需的模块
"debug": "~2.6.9",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0"
}
}

但其实JSON并不合适做配置文件，因为它不能写注释、作为配置文件的可读性差等原因。

配置文件的格式有很多种如：toml、yaml、xml、ini等，目前很多地方开始使用yaml作为配置文件格式。

JSON在Python中的使用

最后我们来看看Python中操作JSON的常用方法有哪些，在Python中操作JSON时需要引入json标准库。

import json

类型转换

Python类型转JSON：json.dump

# 1、Python的dict类型转JSON
person_dict={'name': 'pig', 'age': 18, 'sex': 'man', 'hometown': '江西抚州'}
# indent参数为缩进空格数
person_dict_json=json.dumps(person_dict, indent=4)
print(person_dict_json, '\n')
# 2、Python的列表类型转JSON
person_list=['pig', 18, 'man', '江西抚州']
person_list_json=json.dumps(person_list)
print(person_list_json, '\n')
# 3、Python的对象类型转JSON
person_obj=Person('pig', 18, 'man', '江西抚州')
# 中间的匿名函数是获得对象所有属性的字典形式
person_obj_json=json.dumps(person_obj, default=lambda obj: obj.__dict__, indent=4)
print(person_obj_json, '\n')

执行结果：

JSON转Python类型：json.loads

# 4、JSON转Python的dict类型
person_json='{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
person_json_dict=json.loads(person_json)
print(type(person_json_dict), '\n')
# 5、JSON转Python的列表类型
person_json2='["pig", 18, "man", "江西抚州"]'
person_json_list=json.loads(person_json2)
print(type(person_json_list), '\n')
# 6、JSON转Python的自定义对象类型
person_json='{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
# object_hook参数是将dict对象转成自定义对象
person_json_obj=json.loads(person_json, object_hook=lambda d: Person(d['name'], d['age'], d['sex'], d['hometown']))
print(type(person_json_obj), '\n')

执行结果如下：

对应的数据类型

上面我们演示了Python类型与JSON的相互转换，最开始的时候我们讲过JSON有6种数据类型，那这6种数据类型分别对应Python中的哪些数据类型呢？

需要注意的点

JSON的键名和字符串都必须使用双引号引起来，而Python中单引号也可以表示为字符串，所以这是个比较容易犯的错误！

Python类型与JSON相互转换的时候到底是用load/dump还是用loads\dumps？

他们之间有什么区别？
什么时候该加s什么时候不该加s？

这个我们可以通过查看源码找到答案：

不加s的方法入参多了一个fp表示filepath，最后多了一个写入文件的操作。

所以我们在记忆的时候可以这样记忆：

加s表示转成字符串(str)，不加s表示转成文件。

Python自定义对象与JSON相互转换的时候需要辅助方法来指明属性与键名的对应关系，如果不指定一个方法则会抛出异常！

相信有些看的仔细的同学会好奇上面使用json.dumps方法将Python类型转JSON的时候，如果出现中文，则会出现：

\u6c5f\u897f\u629a\u5dde

这种东西，这是为什么呢？

原因是：Python 3中的json在做dumps操作时，会将中文转换成unicode编码，并以16进制方式存储，而并不是UTF-8格式！

总结

今天我们学习了JSON的2种形式，切记JSON还有[...]这种形式的。

学习了JSON的6种数据类型他们分别对于Python中的哪些类型。

了解了JSON的一些使用场景以及实际的例子。

还学习了在Python中如何使用JSON以及需要注意的事项。

一个JSON知识点却分两篇长文（近万字）来讲，其重要性不言而喻。因为不管你是做爬虫、还是做数据分析、web、甚至前端、测试、运维，JSON都是你必须要掌握的一个知识点

本文为作者投稿，版权归作者个人所有。

在线咨询

上一篇：hyperscirpt-rxjs之表单输入
下一篇：开发者怎样才能写出好的 API？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页json数据转换成csv数据并提供下载链接

您的项目需求