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-loaded :页面加载成功的回调函数,不咋能用到。
  • num-pages :总页数
  • error :加载错误的回调
  • link-clicked:单机pdf内的链接会触发。
  • print 这个是打印函数。 注意:谷歌浏览器会出现乱码,这个和字体有关系。

实现

<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为文件地址路径

this.src = pdf.createLoadingTask({
    url: 'http://localhost:8082/file/demo.pdf',
});

2、设置请求头

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

httpHeaders: {Authorization:'Bearer '+ this.token}

3、src

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

this.src.then(pdf => {
    this.viewVisible = true;
})

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

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)

正确的是这样的

this.src.promise.then(pdf => {
    this.viewVisible = true;
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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

  • 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 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

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

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

  • 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+ElementUI使用vue-pdf实现预览功能

    Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应的组件 我这是通过点击 预览 按钮 获取id打开一个dialog来实现 <!--PDF 预览--> <el-dialog :title="PDF 预览" :visible.sync="viewVisible" width="80%"

  • 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文件功能(利用pdf.js/iframe/embed)

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • 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中使用pdfjs预览pdf文件

    目录 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf文件下载下来,通过电脑安装的专用于打开pdf的软件来查看pdf文件呢.如果有个需求说不要让用户安装软件呢,毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛.ok,有了这样的需求那我们是不是也得去实现嘛,毕竟这理由咱也没法反驳啊. 思考 既然都提出来了,那就想想怎么使用咯.既然需要用到pdf.不知道有没有关于js能够操作的库文件来帮我呢?果断一百度,咱们今天的主角就来

  • vue实现在线预览office文件的示例代码

    最近在做电子档案,后端提供了文件的华为云的oss链接.已经实现了点击下载文件的功能.但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载. 按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定. 顶不住第三方基本上是要money的.那不想掏money,还有什么解决方法呢. 方法一 用微软的office online进行在线预览 https://view.officeapps.live.com/op/view.aspx?src=文件地址 例:https

  • 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 控制页码显示范围不生效问题 本来想的很简单 觉得

  • 浅谈实现在线预览PDF的几种解决办法

    因客户需要实现PDF的预览处理,在网上找了一些PDF在线预览的解决方案,有的用PDFJS的在线预览方式,有的使用PDFObject的嵌入式显示,有的通过转换JPG/PNG方式实现间接显示的方式,开始是想通过简单的方式,能够使用JS插件实现预览最好,可是在线预览总是有一些不足,如不同浏览器的兼容问题,甚至不同的手机平台中展示的效果也不一样,不过最好还是采用了间接的方式,把PDF转换为图片展示效果,达到客户的要求. 1.在线实现预览的方式 一开始我还是很倾向使用这种方式,希望能采用一个较为好的JS插

  • Vue中如何实现在线预览word文件、excel文件

    目录 实现效果 一.查看word 1.引用mammoth.js 2. 页面布局 3. 请求URL显示数据 二.查看Excel 1.引用sheetjs 2.页面布局 3.请求URL显示数据 三.项目应用:根据详情后缀分情况显示word.excel 1. 效果展示 2. 页面布局 3.调用函数展示数据 实现效果 一.查看word 1.引用mammoth.js (1)安装 npm install --save mammoth npm install --save mammoth (2)引入import

  • Android实现pdf在线预览或本地预览的方法

    最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放. 接下来总结下目前能够实现pdf阅读的方案,开发当中需要根据实际需求去选择相应的方案. 1.使用Google doc支持来展示word,excel,pdf,txt(WebView方式在线预览): <span style="font-size:18px;">WebView urlWebView = (WebVi

随机推荐