ViewFile 文件预览BLQ

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

平台差异说明

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

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

下载安装

npm install @tjdata/s-preview-pdf

基本使用

<template>
    <s-preview-pdf src="..."></s-preview-pdf>
</template>

<script>
    import sPreviewPdf from "@tjdata/s-preview-pdf"
    export default {
        components: {
            sPreviewPdf
        }
    }
</script>

预览文件缩放比例

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

<template>
    <s-preview-pdf :scale.sync="scale" src="..."></s-preview-pdf>
</template>

<script>
    import sPreviewPdf from "@tjdata/s-preview-pdf"
    export default {
        components: {
            sPreviewPdf
        },
        data() {
            return {
                scale: 1
            }
        }
    }
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | :----- | :-------: | :----: | :----: | | src | 文件地址，需要解决跨域问题 | String | - | - | | scale | 文件预览比例，用作放大缩小使用 | String | Number | 1 | - | | enablePreviewImage | 开启单张pdf图片预览 | Boolean | false | true | | durtion | 文件缩放后，重新渲染pdf时间间隔 | String | Number | 0 | |

Event

| 事件名 | 说明 | 回调参数 | | :----: | :----: | :----: | :----: | | update:scale | 手势拖拽后的scale大小 | scale |