跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 有哪些 js 插件,能把 js 前端的数据转成文件下载的?
未分類
23 5 月 2020

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

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

資深大佬 : tctc4869 2

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

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

大佬有話說 (15)

  • 資深大佬 : lululau

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

  • 資深大佬 : jydeng

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

  • 資深大佬 : dixeran

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

  • 資深大佬 : sadfQED2

    csv +1

  • 主 資深大佬 : tctc4869

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

  • 主 資深大佬 : tctc4869

    @tctc4869
    @jydeng

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

  • 資深大佬 : jydeng

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

  • 資深大佬 : SilentDepth

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

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

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

  • 資深大佬 : Cbdy

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

  • 主 資深大佬 : tctc4869

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

  • 資深大佬 : SilentDepth

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

  • 主 資深大佬 : tctc4869

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

  • 資深大佬 : SilentDepth

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

  • 資深大佬 : lblblong

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

  • 資深大佬 : Xezzon

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

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具