word

安装：npm install --save mammoth

// 使用mammoth
import mammoth from 'mammoth'

mammoth.convertToHtml(input, options) 将源文档转换为 HTML input: 描述源文档的对象。 在
node.js 上，支持以下输入： {path: path}，其中 path 是. docx 文件的路径。 {buffer:
buffer}，其中 buffer 是包含. docx 文件的node.js 缓冲区。 在浏览器中，支持以下输入：
{arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 缓冲区。
options ( 可选): 转换的选项。 浏览器表示支持arrayBuffer 转换也仅仅支持docx
只能预览.docx文件不能预览doc文件

看代码就对了

// 用于word预览时的弹框
<el-dialog
      ref="appendixDialog"
      :visible="IsShow"
      :show-close="true"
      :width="'900px'"
      class="dialog-div-pre-style"
      :before-close="closePreviewClick"
      center
      :title="fileName"
    >
      <div slot="title" class="header-title">
        <h1 class="title-name">{{ fileName }}</h1>
      </div>
      <div id="el-dialog-div">
        <div>
<div v-else-if="fileType === 'doc'">
            <div v-html="fileUrl"></div>
          </div>
</div>
      </div>
</el-dialog>

data() {
    return {
      // 用于存储附件的数组(只存id)
      fileIdsList: [],
      // 存放编辑 文件的集合（附件回显）
      fileList: [],
      fileListData: [],
      spanArr: [],
      pos: 0,
      singer: false,
      isTemplate: false,
      selectRow: [],
      multipleSelection: [],
      deleteAttachListIds: '',
      // 是否选择模板附件替换fileListData数组
      deleteFunctionId: false,
      fileUrl: '', // 文件路径
      fileName: '', // 文件名称
      IsShow: false, // 是否显示预览
      images: [], // 显示图片(可拓展，直接获取所有的图片，然后一起展示)
      fileType: '', // 文件类型
      pagesPdfCount: 0, // pdf文件总页数
      workbook: [], // 工作表
      sheetNames: [], // 工作表名称合集
      sheetNameActive: 'sheet1', // 现在所在位置的工作表（默认为sheet1）
      SheetActiveTable: '',
      emptyTips: '暂无内容，如有需要请下载查看' // 空文件提示信息
    }
  },

methods:{
// 按钮添加的事件
click_edit(row, index) {
      const fileRoute = row.url ? row.url : row.path // (新增与修改字段不同导致需要进行兼容)
      const type = fileRoute.substring(fileRoute.lastIndexOf('.') + 1).toLocaleLowerCase() // 后缀名
      this.fileUrl = process.env.VUE_APP_BASE_API + fileRoute
      this.fileName = row.name ? row.name : '预览'
      if (type.indexOf('doc') !== -1 || type.indexOf('docx') !== -1) { // WORD
        this.fileType = 'doc'
        this.IsShow = true
        this.handlerDocPreview() // 现在不需要file对象，直接使用数据缓冲区
      }
},
// 预览doc
    handlerDocPreview() {
      try {
        // ArrayBuffer
        const file = this.fileUrl
        this.fileUrl = '正在加载……'
        var xhr = new XMLHttpRequest()
        xhr.open('get', file, true)
        xhr.responseType = 'arraybuffer'
        const that = this
        xhr.onload = function(e) {
          if (xhr.status === 200) {
            const data = new Uint8Array(xhr.response) // 可直接使用xhr.reponse
            mammoth.convertToHtml({ arrayBuffer: data }).then((result) => {
              that.fileUrl = result.value
            }).done()
          }
        }
        xhr.send()
      } catch (e) {
        this.fileUrl = '<h1 style="text-align: center">' + this.emptyTips + '</h1>'
      }
    }
}

预览效果

2.Excel预览插件的使用

安装：npm install --save xlsx

// 使用xlsx--SheetJS
import XLSX from 'xlsx'

		<div v-else-if="fileType === 'xls'">
            <div class="tab">
              <el-radio-group v-model="sheetNameActive">
                <el-radio-button v-for="(item,index) in sheetNames" :key="index" :label="item"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-html="SheetActiveTable"></div>
        </div>

watch:{
sheetNameActive(newData, oldData) {
      // 监听如改变那么则改变数据
      if (oldData !== '' && oldData !== newData) {
        this.getSheetNameTable(newData)
      }
    }
}

methods：{
// 点击事件，触发弹框出来预览效果
Click_edit(row.index){
// EXCEL
     if (type.indexOf('xls') !== -1 || type.indexOf('xls') !== -1) { 
         // 读取excel文件并进行赋值
        this.readWorkbookFromRemoteFile(this.fileUrl)         this.fileType = 'xls'
        this.IsShow = true
      }
},
// 预览excel
    readWorkbookFromRemoteFile: function(url) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      const _this = this
      xhr.onload = function(e) {
        if (xhr.status === 200) {
          const data = new Uint8Array(xhr.response)
          const workbook = XLSX.read(data, { type: 'array' })
          const sheetNames = workbook.SheetNames // 工作表名称集合
          _this.workbook = workbook
          _this.sheetNames = sheetNames
          _this.sheetNameActive = sheetNames[0]
          _this.getSheetNameTable(sheetNames[0])
        }
      }
      xhr.send()
},
// 根据工作表名称获取数据
    getSheetNameTable(sheetName) {
      try {
 // 获取当前工作表的数据
        const worksheet = this.workbook.Sheets[sheetName]   
 // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改    
let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, '<table class="tableFormApprove" border="1px solid #ccc" cellpadding="0" cellspacing="0"')
         // 第一行进行改颜色
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '<tr style="background:#F5F7FA"')
        this.SheetActiveTable = htmlData
      } catch (e) {
        // 如果工作表没有数据则到这里来处理
        this.SheetActiveTable = '<h1 style="text-align: center">' + this.emptyTips + '</h1>'
      }
    },
}

3.Vue图片浏览插件v-viewer的使用

• 安装：yarn add v-viewer(两个都可以)
• 安装：npm install v-viewer --save(两个都可以)

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

<!--    图片进行单独出来进行显示-->
    <div style="display: none">
      <viewer id="imagesListView" ref="viewer" :images="images" @inited="inited">
        <img v-for="(item,index) in images" :key="index" :alt="item" :src="item" width="150px" height="150px">
      </viewer>
    </div>

props: {
// 上传的附件回显
    editFileList: {
      type: Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return []
     }
},
}

watch:{
editFileList: function(val) {
      if (val !== undefined && val.length > 0) {
        if (this.attachListList.length === 0) {
          this.isTemplate = false
        }
        this.fileList = JSON.parse(JSON.stringify(val))
        this.fileIdsList = JSON.parse(JSON.stringify(val))
        this.getAllListImages() // 获取所有附件图片
      }
},
// 监听父组件向子组件传输的附件模板list
    attachListList: function(val) {
      if (val !== undefined && val.length > 0) {
        this.isTemplate = true
        this.$set(this.fileListData)
        this.fileListData = JSON.parse(JSON.stringify(val))
        this.spanArr = []
        this.pos = 0
        this.getSpanArr(this.fileListData)
        // this.fileIdsList = JSON.parse(JSON.stringify(val))
      }
    },

}

methods: {
    click_edit(row,index){
             if (type.indexOf('jpg') !== -1 || type.indexOf('png') !== -1 || type.indexOf('jpeg') !== -1 || type.indexOf('bmp') !== -1 || type.indexOf('gif') !== -1) { // PICTURE
        this.fileType = 'img'
        this.getAllListImages()
        // 重点：要在图片已经请求到再调用！！
        this.$nextTick(() => {
          this.$viewer.view(this.images.findIndex(image => this.fileUrl === image) === -1 ? 0 : this.images.findIndex(image => this.fileUrl === image)) // 设置显示哪一个图片
        })
},
// 获取所有图片
    getAllListImages() {
      const ListData = this.fileList && this.fileList.length === 0 ? this.fileListData : this.fileList
// 重新计算images
      this.images = [] 
      for (let i = 0; i < ListData.length; i++) {
// (新增与修改字段不同导致需要进行兼容)
        const fileRoute = ListData[i].url ? ListData[i].url : ListData[i].path 
// 后缀名
        const type = fileRoute.substring(fileRoute.lastIndexOf('.') + 1).toLocaleLowerCase() 
         // 图片格式
        const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
// 进行图片匹配
        const result = imgList.find(item => item === type) 
        if (result) {
          this.images.push(process.env.VUE_APP_BASE_API + fileRoute)
        }
      }
   }
}

4. 使用pdf.js+Viewer.js 预览PDF附件

• 首先去http://mozilla.github.io/pdf.js/ 官网下载插件(pdf.js)
• 根据自己的项目，放在自己项目的指定目录下；
• 安装：npm install v-viewer --save

// 使用v-viewer
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

pdfjs/web/viewer.html    
   //你项目路径下的PDF中的viewer.html
file=https://169.254.109.160:8001/项目名/PDFfile/1.pdf 
   //文件路径，注意一定 是服务器路径不能是相对文件路径
支持Iframe引入浏览打开

<div v-if="fileType === 'pdf'">
   <iframe :src="'../../pdfjs/web/viewer.html?file=' + fileUrl " style="width: 100%;height: 58vh;"></iframe>
</div>

methods:{
Click_edit(row,index){
    if (type.indexOf('pdf') !== -1) { // PDF
        this.fileType = 'pdf'
        this.IsShow = true
      }

5. 视频播放预览

npm安装

npm install --save vue-video-player