@heisea/viewer

viewer

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

更新说明

v0.2.5

• 修复：图片预览正则出错
• 新增：options支持传入fetch方法

v0.2.4

• 修复：PDF预览发票内容显示不全
• 优化：Esc关闭预览，禁止事件冒泡

v0.2.3

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

v0.2.2

• 优化：错误提示
• 优化：图片判断正则

v0.2.1

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

v0.2.0

• 新增 pdf-viewer pdf预览组件支持支持函数预览

v0.1.1

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

v0.1.0

• 图片预览控件

兼容

• chrome //谷歌
• ie11 //IE
• safari //mac safari
• firefox // 火狐

目录说明

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

命令

进行开发

npm start

打包出生产版本 commonjs 版本

npm run build:common

发布代码

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

 npm publish

安装

npm i @heisea/viewer

初始化

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 到根目录

new CopyWebpackPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, '../node_modules/@heisea/viewer/lib/cmaps/'),
                to: path.resolve(__dirname, '../dist/cmaps/')
            }]
    }),

使用

1.当组件使用

<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}) 支持单独配置配置当前预览器

    // 直接打开图片
    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）