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%" center
   @close='closeDialog'>
     <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small" @click.stop="previousPage">
           上一页
         </el-button>
         <el-button type="primary" size="small" @click.stop="nextPage">
         下一页
        </el-button>
     <span>当前第{{pdfPage}}页 / 共{{pageCount}}页</span>
    </div>

    <div >
     <pdf
       :src="src"
       :page="pdfPage"
       @num-pages="pageCount = $event"
       @page-loaded="pdfPage = $event"
       style="display: inline-block; width: 100%"
    ></pdf>
  </div>
</el-dialog>
<script>
 import pdf from 'vue-pdf';
 export default {
    components: {
      pdf
    },
    data() {
    return {
    //PDF预览
        viewVisible: false,
        src: null,
        pdfPage : 1,
        pageCount: 0,
  }
 },
 methods:{
  //PDF预览
      previewPDF(row){
        this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);
        this.src.then(pdf => {
          this.viewVisible = true;
        });
      },

      //关闭窗口初始化PDF页码
      closeDialog(){
        this.pdfPage = 1;
      },

      //PDF改变页数
      previousPage(){
        var p = this.pdfPage
        p = p>1?p-1:this.pageCount
        this.pdfPage = p
      },
      nextPage(){
        var p = this.pdfPage
        p = p<this.pageCount?p+1:1
        this.pdfPage = p
      }
 }
  }
</script>

3、Controller的返回

@RequestMapping(value = "/previewPDF/{contractId}")
  public ResponseEntity<byte[]> previewPDF(@PathVariable Long contractId) throws TException, IOException {
    ContractAttachmentTmpModelDTO model = contractScanManagementRpcService.queryContractAttachmentTmp(contractId);
    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", model.getAttachmentName());
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    return new ResponseEntity<byte[]>(model.getAttachmentData(),
        headers, HttpStatus.OK);
  }

总结:这个是实现一个简单的预览功能。

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

(0)

相关推荐

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

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

  • 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文档的方法

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

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

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

  • Java实现PDF在线预览功能(四种方式)

    目录 Java实现PDF在线预览 Java快捷实现PDF在线预览 Java实现PDF在线预览 @RequestMapping("/preview1") public void er(HttpServletResponse response){ File file = new File("G:\\桌面\\Thymeleaf3.0中文翻译文档@www.java1234.com.pdf"); if (file.exists()){ byte[] data = null;

  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    目录 需求 实现需求 1.利用on-preview+window.open()实现简易版预览效果 2.封装组件实现更完整的上传完成.预览功能 追加关于问的比较多的问题回复 1.imgsrc路径 2.显示原本elementui的那个上传样式 3.file.response显示没有这个属性和方法 4.https://view.officeapps.live.com/op/view.aspx?src=${data}是干嘛的?预览PDF需要安装其他的插件吗? 总结 需求 最近在做vue2.0+eleme

  • 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

  • 如何基于PHP实现微信小程序pdf文件的预览功能

    目录 知识点 问题描述 探索过程 实现思路 最终效果 实现步骤 总结 知识点 微信小程序预览pdf文件 这都是一些实际项目的开发经验,不是东拼西凑的网上水文.如果这篇文章帮到了你,麻烦动动你发财的小手给点个赞,留下个评论. 问题描述 前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云OSS中的pdf文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理器打开. 这样写问题很明显,pdf文件小的话还可以,当pdf文件很大的时候,加载速度就会很慢.而且我只是需要预览单纯的

  • 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文件的方法

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

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

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

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

随机推荐