PDF预览、图片预览插件

1.PDF.JS

下载地址：地址
1.下载资源放在public/static/pdf下
2.后端书写方法，返回byte字节流给前端。
3.前端API注意返回类型为blob

export function filePreview(query){
    
    
  return request({
    
    
    url:"/attachment-server/attachment/filePreview",
    method: 'post',
    responseType: 'blob',
    params:query,
    timeout:60000
  })
}

4.前端封装方法

previewPdf(row){
    
    
        filePreview({
    
    path:"/asset/deviceTransfer/file",fileName:row.oaFile}).then((res)=>{
    
    
           let blob = new Blob([res.data],{
    
    type:"application/octet-stream"});
           var url = window.URL.createObjectURL(blob)
          window.open(`/static/pdf/web/viewer.html?file=${
      
      encodeURIComponent(url)}`);
         })
    },

5.调用即可。

2.v-viewer

可用在el-upload回显上，原组件没有大图预览。
中文文档地址：文档
1.安装

npm install v-viewer

2.引入

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)

3.使用
在包含图片标签的父级，添加属性v-viewer="{inline: false}"