Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jul 25, 2019 · 2 comments
Labels
js JavaScript

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the js JavaScript label Jul 25, 2019
@liuxiaole
Copy link

liuxiaole commented Jul 25, 2019

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

这个题目有两种解读:

  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
Copy link

josh-axy commented Jul 26, 2019

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

这个题目有两种解读:

  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 是如何描述布局的)。

第二个厉害了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
js JavaScript
Projects
None yet
Development

No branches or pull requests

3 participants