[js] 不依赖第三方库,说下如何使用js读取pdf?

haizhilin2013
2019-07-26 04:39:34 星期五
js
                    
                        
不依赖第三方库,说下如何使用js读取pdf?
Comments per page
< Page 1 / 1 >
liuxiaole 2019-07-25 21:12:15

读取还是读取并解析和展示?

这个题目有两种解读:

  1. 前端不使用第三方库,如何将 PDF 文件显示在网页上。

    • 现代桌面浏览器都自带 PDF viewer 插件的,用 <iframe src="file.pdf"> 就能显示。(embed应该也可以)
  2. 前端不使用第三方库,如何读取并解析 PDF 格式,利用 HTML 技术渲染 PDF 文件内容?

    • 这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容,根据 PDF 文件规范解析内容(PDF 是开源格式),根据 PDF 文件描述的文档内容和布局,用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定,难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。
josh-axy 2019-07-26 05:57:54

读取还是读取并解析和展示?

这个题目有两种解读:

  1. 前端不使用第三方库,如何将 PDF 文件显示在网页上。

    • 现代桌面浏览器都自带 PDF viewer 插件的,用 <iframe src="file.pdf"> 就能显示。(embed应该也可以)
  2. 前端不使用第三方库,如何读取并解析 PDF 格式,利用 HTML 技术渲染 PDF 文件内容?

    • 这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容,根据 PDF 文件规范解析内容(PDF 是开源格式),根据 PDF 文件描述的文档内容和布局,用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定,难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。

第二个厉害了

排行榜
今日答题答题排行
    未答的题
    更多>
      【关注作者公众号】 以面试驱动学习--前端剑解
      【公众号推荐】 不折腾的前端和咸鱼有什么区别

      学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

      【关注官方公众号】 每天4:30-5:00推送
      【公众号推荐】 一起折腾前端算法
      【微信学习群】 备注3+1