pdf-graffiti

一个pdf预览 + 涂鸦的工具

基本使用

    npm i -S pdf-graffiti

    <template>
        <div>
            <PdfGraffiti :isEdit="isEdit" :pdfUrl="pdfUrl" />
        </div>
    </template>

    <script>
        import { PdfGraffiti } from 'pdf-graffiti'
        export default {
            components: {
                PdfGraffiti
            },
            data () {
                return {
                    isEdit: true,
                    pdfUrl: ''
                }
            }
        }
    </script>
    

props

| 属性名 | 描述 | 类型 | 是否必传| | ---- | ---- | ---- | ---- | | v-model | 存储的数据, 通过save方法同步更新 | object: { isEmpty, data }isEmpty: 是否是有效数据data: 存储的数据数据，DataURL | 否 | | isEdit | 是否处于编辑模式，需要 .sync 修饰符修饰 | boolean | 否 | | pdfUrl | 需要渲染的pdf链接地址 | string | 否 |

提供的基本接口

| 方法名称 | 描述 | 参数 | 参数类型 | 参数说明 | 返回值 | | ---- | ---- | ---- | ---- | ---- | ---- | | render | 渲染pdf | pdfurl | string | pdf地址 | 无 | undo | 撤销一次绘制 | 无 | 无 | 无 | 无 | clear | 清空画板 | 无 | 无 | 无 | 无 | eraser | 切换颜色 | color | string | 需要切换颜色的十六进制 | 无 | save | 保存当前绘制的数据 | 无 | 无 | 无 | 无 | importPdf | 加载本地的pdf | 无 | 无 | 无 | 无 | exportAll | 导出当前的pdf+涂鸦为png | 无 |无 | 无 | 无 | exportNote | 导出当前的涂鸦为png | 无 | 无 | 无 | 无 | toPageLocation | 滚动到某一页 | page| number| 需要跳转的页码 | 无 | initNote | 初始化涂鸦 | DataURL | string | save方法保存下来的data数据 | 无 | htmlToPdf | 导出当前的pdf+涂鸦为PDF | fileName | string | 文件名称 | 无

基本示例

    <template>
        <div>
            <PdfGraffiti :isEdit="isEdit" :pdfUrl="pdfUrl" ref="MyPdfGraffiti" />
            <button @click="myUndo">撤销</button>
        </div>
    </template>

    <script>
        import { PdfGraffiti } from 'pdf-graffiti'
        export default {
            components: {
                PdfGraffiti
            },
            data () {
                return {
                    isEdit: true,
                    pdfUrl: ''
                }
            },
            methods: {
                myUndo () {
                    this.$refs.MyPdfGraffiti.undo()
                }
            }
        }
    </script>

回调函数

| 方法名称 | 描述 | 返回值 | 参数说明 | | ---- | ---- | ---- | ---- | | onSave | 保存完成的回调 | { isEmpty, data } | isEmpty:是否是有效数据data: 保存的数据，DataURL | onLoaded | 加载完成的回调 | pageNum | 当前pdf的页码数量 | onPageScroll | 监听页面滚动 | top | 滚动的scrollTop

基本示例

    <template>
        <div>
            <PdfGraffiti :isEdit="isEdit" :pdfUrl="pdfUrl" ref="MyPdfGraffiti" @onPageScroll="onMyPageScroll" />
            <button @click="myUndo">撤销</button>
        </div>
    </template>

    <script>
        import { PdfGraffiti } from 'pdf-graffiti'
        export default {
            components: {
                PdfGraffiti
            },
            data () {
                return {
                    isEdit: true,
                    pdfUrl: ''
                }
            },
            methods: {
                myUndo () {
                    this.$refs.MyPdfGraffiti.undo()
                },
                onMyPageScroll(top) {
                    console.log(top)
                }
            }
        }
    </script>