首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue-pdf实现在线预览PDF文件

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

作者头像
默存
发布于 2022-06-24 07:14:58
发布于 2022-06-24 07:14:58
6K11
代码可运行
举报
文章被收录于专栏:默存默存
运行总次数:1
代码可运行

前言

在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现。

安装依赖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save vue-pdf

相关参数

参数介绍:

  • url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
  • page: 当前显示的页数,比如第一页page=1
  • rotate :旋转角度,比如0就是不旋转,+90,-90 就是水平旋转。
  • progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了。
  • page-loaded :页面加载成功的回调函数,不咋能用到。
  • num-pages :总页数
  • error :加载错误的回调
  • link-clicked:单机pdf内的链接会触发。
  • print 这个是打印函数。注意:谷歌浏览器会出现乱码,这个和字体有关系。

实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <div>
        <el-row>
            <el-button @click="onPreview" size="small">预览</el-button>
        </el-row>
        <el-dialog title="预览合同附件" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
            <el-row :gutter="20">
                <span>{{pageCount}}页, 当前第 {{pdfPage}}</span>
                <el-button type="text" size="mini" @click.stop="previousPage">上一页</el-button>
                <el-button type="text" size="mini" @click.stop="nextPage">下一页</el-button>
            </el-row>
            <div>
                <pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import store from '@/store/'
export default {
    components:{
        pdf
    },
    data(){
        return {
            viewVisible: false,
            src: null,
            pdfPage : 1,
            pageCount: 0,
            token: store.getters.access_token,
        }
    },
    methods:{
        onPreview(){
            this.src = pdf.createLoadingTask({
                url: 'http://localhost:8082/file/demo.pdf',
                httpHeaders: {Authorization:'Bearer '+ this.token}
            });
            this.src.promise.then(pdf => {
                this.viewVisible = true;
            });
        },
        closePreview(){
            this.pdfPage = 1;
        },
        previousPage(){
            let p = this.pdfPage
            p = p > 1 ? p-1 : this.pageCount
            this.pdfPage = p
        },
        nextPage(){
            let p = this.pdfPage
            p = p < this.pageCount ? p+1 : 1
            this.pdfPage = p
        }
    }
}
</script>

效果

注意点

1、URL

url为文件地址路径

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.src = pdf.createLoadingTask({
    url: 'http://localhost:8082/file/demo.pdf',
});
2、设置请求头

可以通过httpHeaders来设置token等参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 httpHeaders: {Authorization:'Bearer '+ this.token}
3、src

这点比较重要,网上很多帖子都是这样的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.src.then(pdf => {
    this.viewVisible = true;
})

会报错 TypeError: this.src.then is not a function

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
TypeError: this.src.then is not a function
    at VueComponent.onPreview (index.vue?6ced:241)
    at click (index.vue?aaff:261)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.handleClick (element-ui.common.js?5c96:9413)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

正确的是这样的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.src.promise.then(pdf => {
    this.viewVisible = true;
});
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
ONLYOFFICE ONLYOFFICE是一家来自欧洲拉脱维亚的Ascensio System SIA公司研发的一款高端办公软件,它除了在线文本文档编辑,在线多人协作,和高端美化的电子表格外,同时还具有免费在线文件转换功能,下面给大家详细介绍一下。亮点介绍永久免费 ;这款软件在线便捷转换文件的功能是完全免费的,没有任何套路捆绑的附加费用。无广告模式; ONLYOFFICE使用起来非常干净清爽,没有任何商业广告,内置广告,捆绑广告。使用方式便捷;在线使用PDF文件转换无需登录,无需注册,打开官网点击PDF转换器就可以在线做到文件转换,同时可以做到
ONLYOFFICE ONLYOFFICE是一家来自欧洲拉脱维亚的Ascensio System SIA公司研发的一款高端办公软件,它除了在线文本文档编辑,在线多人协作,和高端美化的电子表格外,同时还具有免费在线文件转换功能,下面给大家详细介绍一下。亮点介绍永久免费 ;这款软件在线便捷转换文件的功能是完全免费的,没有任何套路捆绑的附加费用。无广告模式; ONLYOFFICE使用起来非常干净清爽,没有任何商业广告,内置广告,捆绑广告。使用方式便捷;在线使用PDF文件转换无需登录,无需注册,打开官网点击PDF转换器就可以在线做到文件转换,同时可以做到
回复回复1举报
推荐阅读
编辑精选文章
换一批
Vue实现在线文档预览
本次实现的文档预览的类型有:docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览
不愿意做鱼的小鲸鱼
2023/07/09
4.7K0
Vue实现在线文档预览
vue-pdf实现pdf预览、分页、下载、打印
https://www.npmjs.com/package/vue-pdf-app
圆圆的冬瓜
2021/08/18
26.5K2
vue-pdf实现pdf预览、分页、下载、打印
ElementUI——报错汇总
https://element.eleme.io/#/zh-CN/component/form
思索
2024/08/16
3460
Vue 通过调用文件流实现 PDF 文件在线预览的方法
如果后端返回的是PDF文件在服务器上的路径,直接访问该路径即可在浏览器中预览PDF文件。例如,后端返回路径http://example.com/path/to/file.pdf,在前端可以通过如下方式实现预览:
小焱
2025/05/19
2.6K0
Vue 通过调用文件流实现 PDF 文件在线预览的方法
PDF预览:利用vue3-pdf-app实现前端PDF在线展示
vue3-pdf-app是一个基于Vue3的插件,用于在Web应用中展示PDF文件。它利用PDF.js库来渲染PDF文档,并提供了简单易用的接口,方便开发者在Vue3项目中集成和使用。
watermelo37
2025/01/22
1.7K0
PDF预览:利用vue3-pdf-app实现前端PDF在线展示
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
本文完整版:《React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能》
蒋川@卡拉云
2022/05/30
5.5K0
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
vue-pdf使用demo
<template> <div class="moduleIntro"> <el-button-group> <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button> <el-button type="primary" size="small" @click="nextPage">下一页<i class="el-icon-arrow-r
李维亮
2022/11/07
5300
【黄啊码】vue-pdf预览时无法显示印章和中文字体或者乱码(简单粗暴)
找到我们安装好的 vue-pdf 安装包里的 pdf.worker.js 文件,如图展示路径
黄啊码
2022/09/08
2.7K0
Vue
通过前面的介绍,我们对目前的项目工程化有了大体了了解,那么其中,在第二阶段的工程化演进中,有一个重要的工程设计理念诞生,他就是著名的 MVC 设计模式,简单点,MVC 其实就是为了项目工程化的一种分工模式;
jinghong
2020/05/12
7.2K0
Vue
浏览器在线预览offce,vue-pdf预览pdf文件
在office官方自带的链接后添加自己的文档链接,浏览器就可以自动解析预览 支持 word 、ppt、excel,不支持pdf格式文件
明知山
2020/09/03
5.4K0
vue-d2admin前端axio异步请求详情
vue-d2admin前端axio异步请求详情 d2admin>src>api>sys.login.js 设计axio api import request from '@/plugin/axios' export function AccountLogin (data) { return request({ url: '/login', method: 'post', data }) } d2admin>src>store>d2admin>modules>account.
landv
2019/07/02
1.2K0
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
在本篇博客中介绍的vue-pdf-embed核心逻辑是获取pdf内容并将其每一页渲染到canvas画布上,以类似图片的方式展示出来。pdf作为本地资源放在项目中。
watermelo37
2025/01/22
1.8K0
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
使用Vue开发Chrome插件
我当时学习开发 Chrome 插件的时候,还不会 Vue,更别说 Webpack 了,所以使用的都是原生的 html 开发,效率就不提了,而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能(原本是打算做自动回复的),顺便巩固下 chrome 开发(快一年没碰脚本类相关技术了),顺便写套模板供自己后续编写 Chrome 插件做铺垫。
愧怍
2022/12/27
3.7K0
使用Vue开发Chrome插件
Vue3 Element Plus WindiCSS 项目开发环境搭建
MVVM 是 Model-View-ViewModel 的简写,它本质上是 MVC 的改进版。MVVM 将其中的 View 的状态和行为抽象化,并且将视图 UI 和业务逻辑分开。 (1)M:即 Model(模型),包括数据和一些基本操作。 (2)V:即 View(视图),指页面渲染结果。 (3)VM:即 View-Model,指模型与视图间的双向操作(无须开发者干涉)。
耕耘实录
2023/12/18
4970
如何实现高性能的在线 PDF 预览
最近接到产品需求,用户需要在我们的站点上在线查看 PDF 文件,并且查看时,用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。
政采云前端团队
2020/06/04
6.9K0
如何实现高性能的在线 PDF 预览
C# 将 Word 转化分享为电子期刊
1、由编辑人员使用 Microsoft Word 编辑期刊内容,上传到系统,生成PDF文件。
初九之潜龙勿用
2024/06/20
2050
C# 将 Word 转化分享为电子期刊
react-pdf预览在线PDF的使用
建议安装8.0.2版本的react-pdf,如果安装更高版本的可能出现一些浏览器的兼容性问题;
用户1174387
2024/09/15
5920
react-pdf预览在线PDF的使用
Element 入门教程
Element 入门 官网:https://element.eleme.cn/#/zh-CN 引入 Element 的 css、js文件和 Vue.js ```html <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> ``` 创建 Vue 核心对象 `
ruochen
2022/03/07
2.8K0
Element 入门教程
Vue & Element
Vue 是一套前端框架,免除原生 JavaScript 中的 DOM 操作,简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想,实现数据的双向绑定,将编程的关注点放在数据上。
小简
2023/01/04
5.8K0
Vue & Element
mojs——在Vue中使用mojs
一个需求需要做动画效果,刚好搏皮有用mojs,就打算通过mojs实现; Vue中的nextTick有什么作用: Vue中的nextTick有什么作用? mojs: https://mojs.github.io/tutorials/
思索
2024/08/15
1200
相关推荐
Vue实现在线文档预览
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档