jh-preview-pdf v0.0.3

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

参考

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