Vue~在线预览doc、docx、pdf、img文件

简介: Vue~在线预览doc、docx、pdf、img文件

Vue~在线预览doc、docx、pdf、img文件

1、导入控件

//预览docx


npm install docx-preview --save

npm install jszip --save


//图片缩放空控件


npm install vue-photo-preview --save


2、创建组件

<template>
  <!--  图片、pdf、docx 预览
          "docx-preview": "^0.1.4",
          "jszip": "^3.10.0",-->
  <div>
    <a-modal title="文件预览" :visible="showDoc || showPdf || showImg" :maskClosable="false" @cancel="cancel"
             width="750px">
      <template slot="closeIcon">
        <my-icon icon="close-circle" class="closeIcon"/>
      </template>
      <template slot="footer">
        <div v-if="showPdf" class="pdf-layout-page">
          <my-button @click="changePdfPage(0)" :disabled="currentPage===1" name="上一页"/>
          {{currentPage}} / {{pageCount}}
          <my-button @click="changePdfPage(1)" :disabled="currentPage===pageCount" name="下一页"/>
        </div>
        <my-button name="取消" @click="cancel"/>
      </template>
      <div class="modal-body form">
        <div v-if="showImg">
          <img :src="images" preview="1" preview-text="" style="width:100%"/>
        </div>
        <div v-show="showDoc" ref="word">
          <iframe v-if="fileUrl" frameborder="0"
                  :src="fileUrl"
                  width='100%'
                  height="100%">
          </iframe>
        </div>
        <div v-show="showPdf" class="pdf-layout" id="top">
          <pdf-view
            ref="pdf"
            :src="pdfPath"
            :page="currentPage"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler"/>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import pdfView from 'vue-pdf'
  import axios from 'axios'
  const docxPre = require('docx-preview')
  window.JSZip = require('jszip')
  export default {
    name: 'FilePreview',
    components: { pdfView },
    data() {
      return {
        showDoc: false,//判断如果是否为word文件显示
        showPdf: false,//判断如果是否为pdf文件显示
        showImg: false,//判断如果是否为图片显示
        fileUrl: '',//pdf链接
        images: '',//图片链接
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
      }
    },
    methods: {
      showView(filePath) {
        let that = this
         let type = filePath.split('.')[filePath.split('.').length - 1]
        if (type === 'jpg' || type === 'png' || type === 'jpeg') {
          that.images = filePath
          that.showImg = true
        } else if (type === 'pdf') {
          that.loadPdfHandler()//重置pdf第一页展示
          that.pdfPath = filePath
          that.showPdf = true
        } else if (type === 'doc') {//word预览 
          that.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + filePath
          that.showDoc = true
        } else if (type === 'docx') {//word预览
          that.showDoc = true
          that.previewWord(filePath)
        }
      },
      // 后端返回二进制流
      previewWord(filePath) {
        let that = this
        // 这里需要提起打开弹窗,因为有时很找不到word的ref 会报错
        axios({
          method: 'get',
          responseType: 'blob', // 因为是流文件,所以要指定blob类型
          url: filePath  
        }).then(({ data }) => {
          docxPre.renderAsync(data, this.$refs.word)
        })
      },
      //pdf上一页下一页操作
      changePdfPage(val) { 
        if (val === 0 && this.currentPage > 1) {
          this.currentPage-- 
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          this.top()
        }
      },
      top() {
        document.querySelector('#top').scrollIntoView(true)
      },
      // pdf加载时
      loadPdfHandler(e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      cancel() {
        this.showDoc = false//判断如果是否为word文件显示
        this.showPdf = false//判断如果是否为pdf文件显示
        this.showImg = false//判断如果是否为图片显示
      }
    }
  }
</script>
<style lang="less" scoped>
  .form {
    height: 600px;
    overflow: auto;
  } 
 .pdf-layout-page {
    left: 30%;
    margin: auto;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    position: absolute
  }
</style>

3、使用组件

<template> 
 <div>
    <file-preview ref="filePreview"/> 
  </div>
</template>
<script>
//组件中引入 
import FilePreview from '@/components/FilePreview/index'
 export default {
    components: { FilePreview  },
     methods: {
      lookFile() {
        this.$refs.filePreview.showView(fileUrl)
      }
  }
} 
</script>

docx-preview组件在解析doc文件会失败,docx可以;没搞清楚是为什么


注:示例中使用的ui框架是 Ant Design Vue ,使用的控件可替换成相应项目的ui框架


antui框架官网

https://1x.antdv.com/docs/vue/introduce-cn/


目录
相关文章
|
3月前
|
C#
【PDF提取内容改名】批量提取PDF指定区域内容重命名PDF文件,PDF自动提取内容命名的方案和详细步骤
本工具可批量提取PDF中的合同编号、日期、发票号等关键信息,支持PDF自定义区域提取并自动重命名文件,适用于合同管理、发票处理、文档归档和数据录入场景。基于iTextSharp库实现,提供完整代码示例与百度、腾讯网盘下载链接,助力高效处理PDF文档。
426 40
|
3月前
|
编译器 Python
如何利用Python批量重命名PDF文件
本文介绍了如何使用Python提取PDF内容并用于文件重命名。通过安装Python环境、PyCharm编译器及Jupyter Notebook,结合tabula库实现PDF数据读取与处理,并提供代码示例与参考文献。
|
5月前
|
人工智能 算法 安全
使用CodeBuddy实现批量转换PPT、Excel、Word为PDF文件工具
通过 CodeBuddy 实现本地批量转换工具,让复杂的文档处理需求转化为 “需求描述→代码生成→一键运行” 的极简流程,真正实现 “技术为效率服务” 的目标。感兴趣的快来体验下把
162 10
|
4月前
|
数据采集 存储 API
Python爬虫结合API接口批量获取PDF文件
Python爬虫结合API接口批量获取PDF文件
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
309 0
|
10天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
113 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
544 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
540 77