使用Vue3+PDF.js实现PDF预览功能

目录
  • 1 前言
  • 2 PDF 预览测试
    • 2.1 下载 PDF.js
    • 2.2 window.open 直接打开
    • 2.3 弹框形式打开
  • 3 修改配置项
    • 3.1 修改主题色为暗色系
    • 3.2 修改默认语言为简体中文
    • 3.3 打开 PDF 后默认跳转到某一页
  • 4 移除部分按钮
    • 4.1 简单按钮移除
    • 4.2 复杂按钮移除
  • 5 错误处理
    • 5.1 跨域报错
    • 5.2 默认语言为简体中文，但下载按钮仍显示为“Save”
  • 总结

1 前言

PDF.js 官网

本文使用的 PDF.js 版本为：v3.0.279

本文未使用 npm 形式在项目中引入 PDF.js 依赖，因为该形式引入的 PDF.js 需要自己写额外页面样式及按钮，而直接在官网下载可以使用 PDF.js 默认提供的 viewer ，不用再增加额外代码，即可实现 PDF 预览等功能

# 使用 npm 形式在项目中引入 PDF.js 依赖
npm i pdfjs-dist

效果预览

2 PDF 预览测试

2.1 下载 PDF.js

在 PDF.js 官网下载 PDF.js ，解压后放到 public/static 下

2.2 window.open 直接打开

// 默认打开 public/static/pdf/web/compressed.tracemonkey-pldi-09.pdf
// 测试 pdf 有点大，第一次打开可能会有点慢，只要有进度条就是正常加载中
window.open('static/pdf/web/viewer.html')
// 传入 pdf 文件地址
const fileUrl = 'xxx'
window.open('static/pdf/web/viewer.html?file=' + fileUrl)

2.3 弹框形式打开

<el-dialog v-model="dialogVisible">
  <iframe :src="'static/pdf/web/viewer.html?file=' + fileUrl"
    style="width: 100%; height: 440px"
  ></iframe>
</el-dialog>

3 修改配置项

3.1 修改主题色为暗色系

修改 public/static/pdf/web/viewer.js

AUTOMATIC: 0, // 跟随浏览器
LIGHT: 1, // 亮色
DARK: 2 // 暗色

3.2 修改默认语言为简体中文

修改 public/static/pdf/web/viewer.js

3.3 打开 PDF 后默认跳转到某一页

// 添加 #page=2 默认跳转到第二页
window.open('static/pdf/web/viewer.html?file=' + fileUrl + '#page=2')

4 移除部分按钮

4.1 简单按钮移除

例：移除[打印]按钮

4.2 复杂按钮移除

例：移除[文本]按钮，由于该按钮点击后会出现面板，所以除了移除当前按钮相关代码外，还要移除面板相关代码

5 错误处理

5.1 跨域报错

注释 public/static/pdf/web/viewer.js 代码

5.2 默认语言为简体中文，但下载按钮仍显示为“Save”

修改 public/static/pdf/web/viewer.html 第159、276行代码

总结

到此这篇关于使用Vue3+PDF.js实现PDF预览功能的文章就介绍到这了,更多相关Vue3 PDF.js实现PDF预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现在线预览pdf文件和下载（pdf.js）

    vue实现在线预览pdf文件和下载（pdf.js）

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • vue使用pdf.js预览pdf文件的方法

    vue使用pdf.js预览pdf文件的方法

    我们在页面进行pdf预览的时候,由于有些文件不能够进行打印和下载,这时候我们使用window自带的pdf就很难满足客户的需求,因此需要另外的办法来支持我们进行特殊条件的pdf文件预览,这里我采用引入pdf.js文件的形式来达到目的. 第一步:下载pdf.js 引入pdf.js文件 地址如下:http://mozilla.github.io/pdf.js/getting_started/ 第二步,vue引入 我这里是把下载下来的文件放在了根目录的piblic下 第三步,使用 主要是地址"/buil

  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    实现效果 可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j

  • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,

  • Vue-pdf实现在线预览PDF文件

    Vue-pdf实现在线预览PDF文件

    前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

  • vue实现pdf文档在线预览功能

    vue实现pdf文档在线预览功能

    针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一.引入插件 方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二.前端页面代码 方式一和方式二:特点精简 <template> <div> <c

  • vue3如何实现PDF文件在线预览功能

    vue3如何实现PDF文件在线预览功能

    目录 概述 正文 创建 vue3 项目 添加 PDF 预览插件 总结 概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果 正文 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

  • Vue实现docx、pdf格式文件在线预览功能

    目录 介绍 docx 安装 使用 PDF 安装 引入和使用 pdf的放大和缩小 多格式的文件渲染函数映射 不支持的文件提示处理 总结 介绍 在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-preview插件 安装 npm i docx-preview 使用 创建一个容器标签 <div ref="file" v-show="extend =

  • 如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能【附实例代码】

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • js上传图片及预览功能实例分析

    本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".

  • viewer.js实现图片预览功能

    viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件: 1.css文件:viewer.css 2.js文件:viewer.js 可以在这里下载 下载后,在html中引入 <link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" /> <script src="

  • 简单实现JS上传图片预览功能

    js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

  • 使用Vue3+PDF.js实现PDF预览功能

    目录 1 前言 2 PDF 预览测试 2.1 下载 PDF.js 2.2 window.open 直接打开 2.3 弹框形式打开 3 修改配置项 3.1 修改主题色为暗色系 3.2 修改默认语言为简体中文 3.3 打开 PDF 后默认跳转到某一页 4 移除部分按钮 4.1 简单按钮移除 4.2 复杂按钮移除 5 错误处理 5.1 跨域报错 5.2 默认语言为简体中文,但下载按钮仍显示为“Save” 总结 1 前言 PDF.js 官网 本文使用的 PDF.js 版本为:v3.0.279 本文未使用

  • vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决

    目录 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 1.先安装vue-pdf-embed 2.安装后 在使用页面引入 PS:vue3.0借用vue-pdf-embed实现在线预览pdf文件 实现效果 实现步骤 一:安装依赖 二:页面使用 三:可能报错一 问题解决 1:下载依赖 2:配置vue.config.js文件 三:可能报错二 问题原因 问题解决 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 本来想的很简单 觉得

随机推荐