@heisea/viewer
v0.2.12
Published
Vue solution for quickly building pages
Downloads
17
Keywords
Readme
viewer
基于vue2的资源预览控件,支持放大、缩小、旋转、拖拽,支持远程图片预览、调起下载、打印,支持多图预览。
更新说明
v0.2.9
- 优化:添加了请求错误打印
v0.2.8
- 修复: 图片文件后缀为大写时识别成文件id
v0.2.6
- 修复: node_modules下pdfjs-dist 插件源码不支持电子签章预览的bug,新增一个
patch-package
依赖包。
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)