Fe-interview: [js] 第101天不依赖第三方库，说下如何使用js读取pdf？

Created on 25 Jul 2019 · 2Comments · Source: haizlin/fe-interview

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

Source

haizhilin2013

Most helpful comment

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

这个题目有两种解读：

前端不使用第三方库，如何将 PDF 文件显示在网页上。
- 现代桌面浏览器都自带 PDF viewer 插件的，用就能显示。（embed应该也可以）</li> </ul></li> <li><p>前端不使用第三方库，如何读取并解析 PDF 格式，利用 HTML 技术渲染 PDF 文件内容？</p> <ul> <li>这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容，根据 PDF 文件规范解析内容（PDF 是开源格式），根据 PDF 文件描述的文档内容和布局，用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定，难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。</li> </ul></li> </ol> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/2718230?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>liuxiaole</strong> <span class="text-muted ml-1">on 25 Jul 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">12</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 2 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>读取还是读取并解析和展示？</p> <p>这个题目有两种解读：</p> <ol> <li><p>前端不使用第三方库，如何将 PDF 文件显示在网页上。</p> <ul> <li>现代桌面浏览器都自带 PDF viewer 插件的，用 <iframe src="file.pdf"> 就能显示。（embed应该也可以）</li> </ul></li> <li><p>前端不使用第三方库，如何读取并解析 PDF 格式，利用 HTML 技术渲染 PDF 文件内容？</p> <ul> <li>这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容，根据 PDF 文件规范解析内容（PDF 是开源格式），根据 PDF 文件描述的文档内容和布局，用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定，难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。</li> </ul></li> </ol> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/2718230?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="liuxiaole picture"> <strong>liuxiaole</strong> <span class="text-muted ml-1">on 25 Jul 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">12</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>读取还是读取并解析和展示？</p> <p>这个题目有两种解读：</p> <ol> <li><p>前端不使用第三方库，如何将 PDF 文件显示在网页上。</p> <ul> <li>现代桌面浏览器都自带 PDF viewer 插件的，用 <iframe src="file.pdf"> 就能显示。（embed应该也可以）</li> </ul></li> <li><p>前端不使用第三方库，如何读取并解析 PDF 格式，利用 HTML 技术渲染 PDF 文件内容？</p> <ul> <li>这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容，根据 PDF 文件规范解析内容（PDF 是开源格式），根据 PDF 文件描述的文档内容和布局，用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定，难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。</li> </ul></li> </ol> </blockquote> <p>第二个厉害了</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/7274196?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="cosloli picture"> <strong>cosloli</strong> <span class="text-muted ml-1">on 26 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(473060101, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(473060101, 1);" onclick="rate(473060101, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(473060101, 2);" onclick="rate(473060101, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(473060101, 3);" onclick="rate(473060101, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(473060101, 4);" onclick="rate(473060101, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(473060101, 5);" onclick="rate(473060101, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/fe-interview/459510232/vue-propyan-zheng-de-typelei-xing-you-na-ji-chong">[vue] prop验证的type类型有哪几种？</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/456644990/vue-watchzen-yao-shen-du-jian-ting-dui-xiang-bian-hua">[vue] watch怎么深度监听对象变化</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/460082185/html-di-70tian-htmlde-abiao-qian-shu-xing-rel-nofollow-you">[html] 第70天 html的a标签属性rel='nofollow'有什么作用？</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/456573716/ruan-ji-neng-di-61tian-zhi-dao-ipv6shi-shi-yao-ma-shuo-shuo">[软技能] 第61天知道IPV6是什么吗？说说它和IPV4的区别是什么？</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/fe-interview/458698515/vue-zai-vuexiang-mu-zhong-ru-he-yin-ru-di-san-fang-ku-bi-ru">[vue] 在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/5070345?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="haizhilin2013 picture"> <strong class="pr-1" dir="ltr">haizhilin2013</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/haizlin/fe-interview/issues/986" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2025 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>

Fe-interview: [js] 第101天 不依赖第三方库，说下如何使用js读取pdf？

Most helpful comment

Fe-interview: [js] 第101天不依赖第三方库，说下如何使用js读取pdf？