# ViewFile 文件预览<a class="link-api" style="margin-left:20px;" href="#API"><img style="width:2rem;height:2rem;" src="../images/to_api.png"/><i class="author">BLQ</i></a>

<demo-block iframeUrl="componentsC/viewFile/viewFile"></demo-block>

该组件用于在线预览文件使用。

### 平台差异说明

| 小程序        | h5    |  android  |  ios  |
| :----:   | :----:  | :----: | :----: |
|    ×    |    √    |    √    |    √    |

::: warning 温馨提示
由于该组件通过ajax发起请求的方式读取文件流，需要解决跨域问题。
:::

### 基本使用

```vue
<template>
    <s-view-file src="..."></s-view-file>
</template>
```

### 文件类型

可以通过设置`mode`属性切换文件类型，支持`pdf`, `docx`, `xlsx`

```vue
<template>
    <s-view-file mode="xlsx" src="..."></s-view-file>
</template>
```

### 预览文件缩放比例

可以通过设置`scale`属性放大或缩小预览效果，默认为1 原始比例。

::: warning 温馨提示
该属性仅针对`pdf`文件生效
:::

```vue
<template>
    <s-view-file scale="1" mode="pdf" src="..."></s-view-file>
</template>
```

###  <a name="API"></a> API

#### Props
| 参数        | 说明    |  <div style="width:200px">类型</div>  |  默认值  |  可选值  |
| --------   | :-----  | :-------: | :----: | :----: |
|    mode    |    文件类型    |    String    |    pdf    |    docx、xlsx   |
|    src    |    文件地址，需要解决跨域问题    |    String    |    -    |    -    |
|    scale    |    文件预览比例，用作放大缩小使用，对于`docx`, `xlsx` 文件类型无效    |    String &#124; Number    |    1    |    -    |
