## 在线预览

该组件可以实现 pdf、图片、txt 的在线预览，支持预览时添加水印。

### 预览图片

引入`cl-preview`组件后，调用该组件的`preview`方法并传入要预览的地址就可以进行附件预览。

如果图片地址不是 eip7 的附件预览地址，需要配置`preview-method`属性方法，方法中返回`Promise`对象，并最终返回`{ src, mode, errorMessage }`格式的对象，其中：

- `src`是要预览的文件的地址
- `mode`是预览的模式，可选的值有：`pdf`, `picture`, `txt`, `html`
- `errorMessage`是预览报错的信息，该属性有内容时不会显示预览文件而是显示该错误信息

```html
<template>
  <el-button type="primary" @click="preview">预览</el-button>
  <cl-preview ref="myPreview" :preview-method="previewMethod" />
</template>
<script>
  export default {
    data() {
      return {
        previewMethod: (url) => {
          // 这里的url地址等于preview方法传入的imgUrl
          return new Promise((resolve) => resolve({ src: url, mode: 'picture' }))
        },
        imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      }
    },
    methods: {
      preview() {
        this.$refs.myPreview.preview(this.imgUrl)
      }
    }
  }
</script>

<!-- test-1.vue -->
```

### 预览 PDF

预览 PDF 时只需要在`preview-method`方法中返回`{ src, mode: "pdf" }`，如果后端指向`eip7`则不需要额外配置`preview-method`属性方法。

```html
<template>
  <el-button type="primary" @click="preview">预览</el-button>
  <cl-preview ref="myPreview" :headers="headers" />
</template>
<script>
  export default {
    data() {
      return {
        headers: {
          Authorization: 'Basic YWRtaW46NEFmeTJzNENiKzhCN2RFWFpIc08vdz09'
        },
        pdfUrl: 'http://127.0.0.1:8088/file/onlinePreviewController/v1/onlinePreview?fileId=1417333778027778048'
      }
    },
    methods: {
      preview() {
        this.$refs.myPreview.preview(this.pdfUrl, '文档在线浏览')
      }
    }
  }
</script>

<!-- test-2.vue -->
```

### 添加水印

预览时设置`watermark`属性为`true`时可以追加水印，水印默认的内容为`watermark`，通过`watermark-options`属性可以指定水印内容和其他配置。

```html
<template>
  <el-button type="primary" @click="preview">预览</el-button>
  <cl-preview ref="myPreview" watermark :watermark-options="watermarkOptions" />
</template>
<script>
  export default {
    data() {
      return {
        txtUrl: 'http://www.chenlongkeji.com:8280/file/onlinePreviewController/v1/onlinePreview?fileId=1414776509650046976',
        watermarkOptions: {
          text: () => 'admin 2021-07-07'
        }
      }
    },
    methods: {
      preview() {
        this.$refs.myPreview.preview(this.txtUrl)
      }
    }
  }
</script>

<!-- test-3.vue -->
```

### 全局预览组件

可以添加一个全局的预览组件，这样在任意组件中可以通过`this.$preview(file)`来调用预览页面。全局预览组件的安装方式如下：

```html
import Preview from 'swordpaas-ui/packages/plugins/Preview' Vue.use(Preview, { // 预览地址处理方法 before: (file) =>
`http://www.chenlongkeji.com:8280/file/onlinePreviewController/v1/onlinePreview?fileId=${file.response.fileId}`, // 是否加水印 watermark:
true, // 水印配置 watermarkOptions: { text: () => 'admin 2021-7-22', }, })
```

### 属性说明

| 属性              | 类型     | 默认值 | 说明                                                                          |
| :---------------- | :------- | :----- | :---------------------------------------------------------------------------- |
| title             | string   | -      | 标题，`preview(url, title)`方法中传入了`title`时会优先显示传入的`title`       |
| closeable         | boolean  | true   | 是否显示右上角的关闭按钮                                                      |
| headers           | object   | -      | 设置预览的请求头部                                                            |
| preview-method    | Function | -      | 预览执行请求数据的拦截器，需要按照`{ src, mode, errorMessage }`格式来返回数据 |
| watermark         | boolean  | false  | 是否显示水印                                                                  |
| watermark-options | object   | -      | 水印的配置项                                                                  |

### 方法说明

| 方法名称 | 说明                     | 参数                                                    |
| :------- | :----------------------- | :------------------------------------------------------ |
| preview  | 打开弹框显示要预览的附件 | `(url, title)` `url`为要预览的附件地址，`title`为标题。 |

### `watermark-options`配置说明

```javascript
const defaultOptions = {
  text: 'watermark',
  watermark_x: 20, //水印起始位置x轴坐标
  watermark_y: 80, //水印起始位置Y轴坐标
  watermark_rows: 0, //水印行数
  watermark_cols: 0, //水印列数
  watermark_x_space: 50, //水印x轴间隔
  watermark_y_space: 50, //水印y轴间隔
  watermark_color: '#ccc', //水印字体颜色
  watermark_alpha: 0.4, //水印透明度
  watermark_fontsize: '14px', //水印字体大小
  watermark_font: '微软雅黑', //水印字体
  watermark_width: 166, //水印宽度
  watermark_height: 100, //水印长度
  watermark_angle: 20 //水印倾斜度数
}
```
