Gxd-vue-file-preview

介绍

vue 文件在线预览展示功能，支持文件（PDF，PNG，JPEG，JPG，GIF，DOC，DOCX，PPT，PPTX，ELXS，ELX）

预览

![demo](http://static.e56buy.com/1610238353869.jpg "demo")

安装

npm i gxd-file-preview --save --registry  https://registry.npm.taobao.org

插件全局引用

import vueFilePreview from 'gxd-file-preview';

//初始化自定义插件，（pdf.js,worker.js文件建议放在本地服务器),cdn有可能不稳定
Vue.use(vueFilePreview,{
    pdf: 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js', //pdf插件
    worker:'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js',//pdf.work插件
});

插件使用

<template>
  <div id="app"></div>
</template>

<script>
  export default {
    name: 'app',
    components: {},
    data(){
      return {}
    },
    created() {
      setTimeout(()=>{
        this.$preview({
          //url: 'https://testimg.tiangongy.com/100601/a024b86760bb1ff3b38f25ae2e0b9bdf', //图片
          //url: 'https://testimg.tiangongy.com/100601/9958ff80d202f91b347b14b5c56f14e8', // xlsx
          //url: 'https://testimg.tiangongy.com/100601/12d7e6a9b0b9169b800fbb29061212c2', //pptx
          //url: 'https://testimg.tiangongy.com/100601/ce44c69f3075334e6c624b8180a42804', //doc,
          //url: 'https://testimg.tiangongy.com/100601/3b85b4f1c3accdb4bb9f7e42e1f9070e',
          url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
          fid: '12121212'
        })
      }, 2000);

    },
    methods:{

    }
  }
</script>

<style>
</style>

<template>
    <div id="app">
        <h1>列表展示</h1>
        <xd-file-list-preview 
          :show-close="showClose" 
          :list="list" @remove="handleRemoveClick"
          :is-pagination="isPagination"
          ></xd-file-list-preview>
        <hr>
        <h1>文件预览模式</h1>
        <a @click="handleClick" style="color: #4285f4">9958ff80d202f91b347b14b5c56f14e811</a>
    </div>
</template>

<script>
  interface FileItemFormat {
    url:string; //文件路径（绝对路径）
    name?: string; //文件名称
    fid?: string; //文件ID
    download?: string; //预览页面是否显示下载按钮
  }
  export default {
    name: 'app',
    components: {},
    data() {
      return {
        showClose: true, //是否开启删除功能
        isPagination: true, //列表启动翻页功能
        /**@type FileItemFormat **/
        list: [
          {url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'},
          {url: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/admin-upload/202111081034429231.png?x-oss-process=style/common'},
          {url: 'http://static.e56buy.com/XdgfsqR2INp7uFxTuLQtnMstYLY4K8rr.蛋糕缺少内容.docx', name: 'aaaa'},
          {
            url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
            name: 'aaaa',
            fid: 'aadadads',
            download: false ,//是否展示下载按钮
          },
        ]
      }
    },
    created() {
    },
    methods: {
      /**
       * @description 删除图片事件
       * @param item {Object} 当前被删除的文件对象
       * @param done {function} 删除文件完成回调函数
       */
      handleRemoveClick(item, done) {
        setTimeout(() => {
          console.log('handleRemoveClick', item);
          done()
        }, 2000);
      },

      /**
       * @description 点击查看预览功能
       */
      handleClick() {
        this.$preview({
          url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
          fid: 'aadadads',
          download: false ,//是否展示下载按钮
        })
      },
    }
  }
</script>

<style>
</style>

项目开发下载与初始化

# 克隆项目
git clone [email protected]:e56buy/xd-file-preview.git

# 进入项目目录
cd xd-file-preview

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。
建议通过npm按照，通过如下操作解决 npm 下载速度慢的问题
npm install --save --registry=https://registry.npm.taobao.org

Nginx配置静态资源可以跨域访问（注意访问静态资源需要做跨域处理）

#全局模式

server {
    listen       80;
    add_header 'Access-Control-Allow-Origin' '*';
    location /Roboto/ {
        root   /home/images;
        autoindex on;
    }
}

#文件路径配置访问

#访问路径拼接img访问本地绝对路径下的某图片 
location /img/ {
    #跨域配置，如果不生效请先清除浏览器缓存数据
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    expires      30d;
    #当访问https://server_name/img/路径时，就会访问本的/Users/chokshen/Desktop/img/文件夹
    root /Users/chokshen/Desktop/;
    error_log off;
    access_log /dev/null;
    autoindex on;
}

版本日志
1.2.0 
1、新增JSON，TXT，JS，HTML，CSS预览功能
2、列表展示功能新增 预览模式时候 左右翻页功能

1.1.18 
优化文档显示

1.1.17 
修复预览offic系列访问不成功问题