jh-vue-select-treecom

安装

npm install jh-preview-pdf

或

yarn add jh-preview-pdf

使用

// main.js
import JhPreviewPdf from 'jh-preview-pdf/lib/jh-preview-pdf.umd.min'
import 'jh-preview-pdf/lib/jh-preview-pdf.css'

Vue.use(JhPreviewPdf)

更多请参考examples/App.vue

pdf预览组件

1、使用url

::: tip pdf预览组件里分为两种加载文件方式，第一种是使用链接，此链接返回二进制流文件。 :::

<template>
  <div>
    <JhPreviewPdf
      :fileArrayUrl="fileArrayUrl"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileArrayUrl: ''
    }
  }
}
</script>

2、使用网络请求

::: tip 第二种是用网络请求的方法，内部通过axios请求，只需配置axios基本请求参数。 :::

<template>
  <div>
    <JhPreviewPdf
      :isUrlMethod="false"
      :axiosConfig="axiosConfig"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      axiosConfig: {
        methods: 'get',
        url: '',
        responseType: 'arraybuffer',
        headers: {}
      }
    }
  }
}
</script>

3、完整pdf文件预览(示例中使用pdf文件url)

::: tip 文件预览分为两种预览方式：第一种是把整个pdf文件全部加载，第二种是分页加载，分页功能可以对页码进行操作。 两种预览方式都可缩放，设置最大、最小宽度，可以根据父容器的宽度动态设置pdf内容宽度。 :::

<template>
  <div>
    <JhPreviewPdf
      :fileArrayUrl="fileArrayUrl"
      isRenderAll/>
  </div>
</template>

4、分页预览

<template>
  <div>
    <JhPreviewPdf
      :fileArrayUrl="fileArrayUrl"
      :scale="0.2"
      :maxScale="2"
      :minScale="0"
      :relativeWidth="1"/>
  </div>
</template>

5、添加水印

::: tip 可以对文件添加自定义水印，配置自定义内容、宽度、高度、字体样式、旋转角度。 :::

<template>
  <div>
    <JhPreviewPdf
      :fileArrayUrl="fileArrayUrl"
      watermark
      :watermarkOption="watermarkOption"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileArrayUrl: '',
      watermarkOption: {
        width: 200,
        height: 200,
        font: '16px Microsoft YaHei',
        fillStyle: '#ffccc7',
        textAlign: 'left',
        context: 'jh',
        rotate: -18
      }
    }
  }
}
</script>

props

| 属性 | 类型 | 默认 | 说明 | | ------------ | ----- | -------------| ---------------------------------------- | | isRenderAll | Boolean | false | 是否需要预览完整pdf文件 | | isUrlMethod | Boolean | true | 是否是通过url方式加载文件 | | fileArrayUrl | String | | 文件url | | axiosConfig | Object | | axios请求配置，例如：options【{method, url, responseType: 'arraybuffer/blob', headers, ...}】 | | scale | Number | 0.2 | 每次缩放比 | | maxScale | Number | 2 | 最大缩放值 | | minScale | Number | 0 | 最小缩放值 | | relativeWidth | Number | 1 | 相对于父盒子的宽度 | | watermark | Boolean | false | 是否添加水印 | | watermarkOption | Object | | 水印相关配置(宽、高、文本内容、字体、颜色、居中方式、旋转角度)，例如：options【{width: 200, height: 200, context: 'jh', font: '16px Microsoft YaHei', fillStyle: '#ffccc7', textAlign: 'left/center/right', rotate: -18}】 |

参考

https://zhuanlan.zhihu.com/p/337520239