有哪些 js 插件，能把 js 前端的数据转成文件下载的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2065 天前的主题，其中的信息可能已经有所发展或是发生改变。

后端的文件下载,不同的 mvc 框架，处理是不同的，有些麻烦，因此我对于数据下载，我偏向于先弄到 web 前端，然后用过 web 前端的把 js 数据，例如把 js 的 json 数据转成文件下载，例如 excel，txt，pdf 。

对于这方面，各位知道哪些呢，对于表格数据的下载，除了把表格转 excel，还有直接定制 html 内容转成 pdf 下载的么？

第 1 条附言 · 2020 年 5 月 22 日

假若我有一个比较复杂 json 数据（有键值对，也有集合），在前端 js 环境中，我要把这个 json 数据进行可自定义的可视化显示（通过模板引擎以及模板代码，将 json 的数据可视化成带有文字行段落和表格的内容，比如 html 的内容，或者是 markdown 格式的内容），然后在把内容显示的效果转化成单个文件（ html 或 md 文件）下载到本地，在本地可通过浏览器或者是 markdown 软件查看。这个 js 能做到么？

下载

表格

Web

MVC

15 条回复 • 2020-05-23 08:05:15 +08:00

lululau

2020 年 5 月 22 日 via iPhone

导出数据就 csv 吧，别惯那些臭毛病

jydeng

2020 年 5 月 22 日

html => canvas => pdf
html2canvas 、jspdf 坑多，要谨慎。

dixeran

2020 年 5 月 22 日 via Android

写 @media print 样式，然后调用浏览器的打印

sadfQED2

2020 年 5 月 22 日 via Android

csv +1

tctc4869

2020 年 5 月 22 日

@jydeng 问一下，如果要把 html 弄的好看点，可能得引用插件，在转成单个 pdf 文件，这个在 js 里有什么方式可以实现？

tctc4869

2020 年 5 月 22 日

@tctc4869
@jydeng

比如我要把引用一些 js 和 css 插件，依据 url，在生成 html，填入引用，然后转成 pdf 或单个文件，这个有什么好的方式么？

jydeng

2020 年 5 月 22 日

@tctc4869 可以，html2Canvas 就是把你看到的页面转成 canvas.

SilentDepth

2020 年 5 月 22 日

文本类的数据转成 Blob 然后 createObjectURL 就可以交给 <a> 下载了。

其他复杂类型的先用工具库封装（ xlsx.js 、pdf.js 等），然后同样转成 Blob 再下载。

Canvas 的话，可以考虑 Pico，质量比 html2canvas 高很多。

Cbdy

2020 年 5 月 22 日

https://github.com/cbdyzj/design/blob/master/src/util/excel.ts

tctc4869

2020 年 5 月 22 日

@SilentDepth 问一下，假若我有一个比较复杂 json 数据（有键值对，也有集合），在前端 js 环境中，我要把这个 json 数据进行可自定义的可视化显示（通过模板引擎以及模板代码，将 json 的数据可视化成带有文字行段落和表格的内容），然后在把内容显示的效果转化成单个文件（ html 或 md 文件）下载到本地，在本地可通过浏览器或者是 markdown 软件查看。这个 js 能做到么？

SilentDepth

2020 年 5 月 22 日

@tctc4869 #10 如果是转化成文本数据（ HTML 、MD ），把 JSON 看做 AST，其实就是个 Transform 的过程，拼装好目标字符串就行了。

tctc4869

2020 年 5 月 22 日

@SilentDepth
如果有引用的图片和引用的 js 和 css 资源，要怎么办？把这些下载到本地也是可以，
但我要想要下载的时候都装进一个文件里，这个要在 js 里要怎么弄，有演示连接么。

SilentDepth

2020 年 5 月 22 日

@tctc4869 #12 压缩，例如用 jszip 。

lblblong

2020 年 5 月 22 日

file-saver 就可以 https://www.npmjs.com/package/file-saver
或者直接自己写： https://www.pianduan.fun/code/407

Xezzon

2020 年 5 月 23 日 via Android

function down(data) {
let download = document.createElement("a")
download.href = "data:text/json;utf-8," + JSON.stringify(data)
download.download = "文件名.json"
download.click()
}