# viewer
基于vue2的资源预览控件，支持放大、缩小、旋转、拖拽，支持远程图片预览、调起下载、打印，支持多图预览。

## 更新说明
`v0.2.7`
1. 修复： 图片文件后缀为大写时识别成文件id

`v0.2.6`
1. 修复： node_modules下pdfjs-dist 插件源码不支持电子签章预览的bug，新增一个`patch-package`依赖包。

`v0.2.5`
1. 修复：图片预览正则出错
2. 新增：options支持传入fetch方法

`v0.2.4`
1. 修复：PDF预览发票内容显示不全
2. 优化：Esc关闭预览，禁止事件冒泡

`v0.2.3`
1. 修复：PDF预览不需要`@heisea/viewer/lib/vendors~pdfjsWorker.common.js`

`v0.2.2`
1. 优化：错误提示
2. 优化：图片判断正则

`v0.2.1`
1. 修复：PDF预览必须`@heisea/viewer/lib/vendors~pdfjsWorker.common.js`
1. 优化:允许在绑定到全局时传人参数`vue.use(Viewer,options)`,单独使用组件时不生效。

`v0.2.0`
1. 新增 ***pdf-viewer*** pdf预览组件支持支持函数预览

`v0.1.1`
1. 修改下载方法，目前只保留模拟a下载的逻辑
1. 新增`downloadFN`允许自定义下载方法

`v0.1.0`
1. 图片预览控件

## 兼容
+ chrome //谷歌
+ ie11 //IE
+ safari //mac safari
+ firefox // 火狐

## 目录说明

+ build 项目脚手架配置 
+ lib 生产用代码
+ src 源码
+ index.html demo

## 命令

进行开发
```bash
npm start
```

打包出生产版本 commonjs 版本
```bash
npm run build:common

``` 

### 发布代码

```bash
  npm version <newversion> | major | minor | patch]
```

```bash
 npm publish
```

## 安装

```bash
npm i @heisea/viewer
```

## 初始化

```js

import Viewer from '@heisea/viewer'
Vue.use(Viewer,{
    props: {
        fileId: 'id',
        fileName: 'originalFileName',
        fileSuffix: 'ext',
        fileUrl: 'url',
        data: 'data'
    },
    http: {
        filePath: 'http://hxgw.heisea.cn/base/fe/info'
    },
    fetch
}); // 当前组件
Vue.prototype.$fetch = fetch; // 当传参数时会调用当前获得文件

```

注意pdf预览，必须设置拷贝字体资源文件夹cmaps 到根目录
```js
new CopyWebpackPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, '../node_modules/@heisea/viewer/lib/cmaps/'),
                to: path.resolve(__dirname, '../dist/cmaps/')
            }]
    }),

```

## 使用
1.当组件使用
```js
<template>
     <img-viewer v-bind="cfg" />
</template>
<script>
export default {
    data() {
        return {
            cfg: {
                mode: 'img',
                value: 'http://bucket-cert-test.oss-cn-shanghai.aliyuncs.com/2019/10/51df3ed3-fa5f-4334-9963-6767fe63aa06.jpg'
            },
        };
    }
};
</script>

```
2.函数调用 this.$viewer({value:url,options})
支持单独配置配置当前预览器
```js
    // 直接打开图片
    this.$viewer('http://bucket-cert-test.oss-cn-shanghai.aliyuncs.com/2019/10/51df3ed3-fa5f-4334-9963-6767fe63aa06.jpg');
    // 直接打开id对应的资源
    this.$viewer('1182133098524016641,1182222336212881410');
```

## 配置

属性名 | 类型 | 说明
--- | --- | --- 
mode|String|显示状态`node:不显示，btn:按钮，img:图片`
value|Auto|显示的内容`object:作为资源对象，Array:多个资源对象，String：资源地址（支持用‘,’分割多个）`
btnLabel|String、Function|`mode:btn`时使用修改显示内容，默认：“查看文件”,同时支持直接
http | Object | 请求配置，必须配置`$fetch`
http.filePath | String | 文件请求地址
props| Object | 配置字段
extend | Object | 站位节点属性配置
downloadFN | Function | 自定义资源下载逻辑（url,fileName）
