0.2.12 • Published 1 year ago

@heisea/viewer v0.2.12

Weekly downloads
2
License
MIT
Repository
-
Last release
1 year ago

viewer

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

更新说明

v0.2.9 1. 优化:添加了请求错误打印

v0.2.8 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

命令

进行开发

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');

配置

属性名类型说明
modeString显示状态node:不显示,btn:按钮,img:图片
valueAuto显示的内容object:作为资源对象,Array:多个资源对象,String:资源地址(支持用‘,’分割多个)
btnLabelString、Functionmode:btn时使用修改显示内容,默认:“查看文件”,同时支持直接
httpObject请求配置,必须配置$fetch
http.filePathString文件请求地址
propsObject配置字段
extendObject站位节点属性配置
downloadFNFunction自定义资源下载逻辑(url,fileName)
0.2.12

1 year ago

0.2.11

1 year ago

0.2.10

2 years ago

0.2.9

2 years ago

0.2.8

3 years ago

0.2.6-beta.4

4 years ago

0.2.6-beta.3

4 years ago

0.2.6-beta.1

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago