前端 pdf 在线预览

这篇具有很好参考价值的文章主要介绍了前端 pdf 在线预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

主要介绍了几种 pdf 在线预览的方式,包括浏览器打开、iframe 打开、pdfjs、react-pdf 第三方插件预览等

pdf 文件放在本地了(public/pdf/demo.pdf),作为静态文件访问。

因为项目最终要通过 electron 打包成 exe 执行文件,而且需要离线访问。

1. 浏览器打开

通过window.open直接打开一个新窗口,预览 pdf 文件。

通过 Command+F 可以进行全局搜索,这也是浏览器自带的功能

window.open("./pdf/demo.pdf");

2. iframe 打开

和浏览器新窗口打开一样,也是使用了浏览器文件本身的功能实现预览,即内置的 PDF Viewer 来显示 PDF。

可以在 url 后面添加参数,进行个性化配置展示,调整初始化状态等:

  • page:跳转到指定页码。初始化配置,可以控制 pdf 默认打开的起始页面

  • navpanes:控制左侧的缩略图预览导航是否默认打开。0-关闭,1-打开

  • toolbar:是否展示工具栏。0-关闭,1-打开

<iframe
  className="pdf-iframe"
  title="预览文档"
  src="./pdf/demo.pdf#page=100&navpanes=0"
  width="100%"
  height="100%"
></iframe>

但是这个是可以在浏览器中进行配置的

具体操作为设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档

window.open预览pdf,前端,pdf

设置为“在 Chrome 中打开 PDF 文件”,为如下效果:

window.open预览pdf,前端,pdf

设置为“下载 PDF 文件”,为如下效果:

window.open预览pdf,前端,pdf

基本功能都有了,缺点是没法实现全局搜索

3. pdfjs 插件打开

github 地址为:github.com/mozilla/pdf…[1]

下载地址为:download[2]

window.open预览pdf,前端,pdf

viewer.html是 pdfjs 库提供的一个示例页面,提供了完整的 PDF 阅读界面,包含了各种功能和工具。如果需要自定义展示页面,可以自己写一个页面,动态化展示功能.

<iframe
  className="pdf-iframe"
  title="预览文档"
  src="/web/viewer.html?file=../pdf/demo.pdf#page=30&navpanes=0"
  width="100%"
  height="100%"
></iframe>

预览效果如下图所示:

window.open预览pdf,前端,pdf

4. react-pdf预览

react-pdf 本质上也是使用的 pdfjs,是在它的基础上做了封装。

该方式,是将 pdf 转为 canvas,一页页展示的

如果文件比较大,页码比较多,加载可能会有些卡

但是移动端也是可以使用的。

import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = "./js/pdf.work.js";

function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setRenderNumPages(numPages);
}

<Document
  file="/pdf/demo.pdf"
  loading="资源加载中..."
  error="资源加载失败"
  onLoadSuccess={onDocumentLoadSuccess}
  onLoadError={onLoadError}
  className="pdf_page_document"
>
  {[...Array(renderNumPages)].map((_, index) => (
    <Page
      key={`page_${index + 1}`}
      pageNumber={index + 1}
      loading=""
      error="fail to load resource"
      renderMode="canvas"
      renderAnnotationLayer={false}
      renderTextLayer={false}
      width={300}
    />
  ))}
</Document>;

预览效果如下所示:默认没有工具栏,需要自己处理

window.open预览pdf,前端,pdf

注意:pdfjs和pdf.worker.js的版本号要对应,不然会有如下报错:

Warning: UnknownErrorException: The API version "3.11.174" does not match the Worker version "3.6.172".

查看版本号,可以通过console.log("pdf-js版本", pdfjs.version)来打印文章来源地址https://www.toymoban.com/news/detail-834712.html

到了这里,关于前端 pdf 在线预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端小程序,h5,浏览器,app, doc,.docx,.ofd,.PDF,.WPS以及Office文档的在线解析预览方式

    在线预览是将Word、PPT、Excel、PDF、OFD、音视频等文件在浏览器中解析查看。       我使用的是usdoc,也有用office online进行在线预览,不过注意的是使用usdoc的时候,我们先需要注册和添加预览的地址域名 usdoc的地址:http://www.usdoc.cn 进入用户中心,我们进行注册 注册好之后,先

    2024年02月11日
    浏览(62)
  • 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

    (一)微软office免费预览( 推荐 ) 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 (二)XDOC文档预览云服务  移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少

    2024年02月05日
    浏览(71)
  • uni-app 微信小程序 支付宝小程序(alipay) 百度小程序(baidu),预览pdf(链接和base64) 及下载(仅微信),window.open uni.downloadFile

    废话不多说直接上代码吧 之前搜了一大堆有的没的,最终还是小伙伴巴拉文档一起找到的方案(离不开小伙伴的帮助,自己总容易陷入死局,在此鸣谢 疾风李青!); 想起个事:一定要给这些路径的域名配到相应的开发管理上,其他平台不过多赘述了 首先是预览,由于我这

    2024年02月15日
    浏览(55)
  • vue 在线预览PDF

    vue 使用 vue-pdf 实现pdf在线预览 报错:MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead) Package not compatible with Vue cli version 5.x pdfjs 官网地址 使用案列 可能报错:file origin does not match viewer’s。 直接注释掉web/viewer.js vue预览本地pdf文件方法之iframe pdf文件,为什么有

    2024年02月11日
    浏览(44)
  • 文档在线预览(二)word、pdf文件转html以实现文档在线预览

    @ 目录 一、前言 1、aspose 2 、poi + pdfbox 3 spire 二、将文件转换成html字符串 1、将word文件转成html字符串 1.1 使用aspose 1.2 使用poi 1.3 使用spire 2、将pdf文件转成html字符串 2.1 使用aspose 2.2 使用 poi + pbfbox 2.3 使用spire 3、将excel文件转成html字符串 3.1 使用aspose 3.2 使用poi + pdfbox 3.3 使用

    2024年02月06日
    浏览(141)
  • vue-pdf实现pdf文件在线预览

    在日常的工作中在线预览 PDF 文件的需求是很多的,下面介绍一下使用 vue-pdf 实现pdf文件在线预览 使用 npm 安装 vue-pdf npm install vue-pdf 使用 vue-pdf 显示 PDF 文件 此时页面中就会显示我们提供的 PDF 文件了,但是此时只显示了 PDF 文件的第一页 按页显示 PDF 文件 使用 vue-pdf 能满足

    2024年02月13日
    浏览(46)
  • 使用pdfjs实现在线预览pdf

    在工作中可能会遇到前端展示pdf文件进行预览并提供下载的需求场景,例如操作指引,这个时候需要寻找一款实现该功能的插件,以pdjjs举例子 这个地方区分是请求后端接口还是直接加载本地pdf文件 如果是请求后端获取到的pdf文件流 如果是读取本地的文件,则url地址直接是本地的

    2024年02月07日
    浏览(32)
  • 文档在线预览(四)将word、txt、ppt、excel、图片转成pdf来实现在线预览

    @ 目录 事前准备 1、需要的maven依赖 添加spire依赖(商用,有免费版,但是存在页数和字数限制,不采用spire方式可不添加) 2、后面用到的工具类代码: 一、word文件转pdf文件(支持doc、docx) 1、使用aspose方式 2、使用poi方式 3、使用spire方式 二、txt文件转pdf文件 三、PPT文件转

    2024年02月08日
    浏览(98)
  • vue在线预览word、excel、PDF

    1、安装依赖 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api 2、预览WORD代码 3、预览EXCEL 4、预览PDF 5、项目参考地址

    2024年02月09日
    浏览(60)
  • Vue中使用pdf.js实现在线预览pdf文件流

    以下是在Vue中使用pdf.js实现在线预览pdf文件流的步骤: 在需要使用的组件中,使用以下代码引入pdf.js: 使用pdf.js的 getDocument() 方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。例如,可以使用axios从服务器获取pdf文件流: 在 loadPdf() 方法中,使用 getDocument() 方法

    2024年02月09日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包