vant-preview-pdf组件使用说明

安装

npm install -S vant-preview-pdf

准备工作

安装后找到如下文件夹

node_modules

vant-preview-pdf

cmaps

将cmaps文件夹上传服务器，使其可以使用链接访问

可放置在public文件夹下与index.html同级，使用项目链接访问该文件

引入

const vantPreviewPdf = require("vant-preview-pdf") 
Vue.use(vantPreviewPdf)

使用

<vant-preview-pdf cMapUrl="http://www.xiaobusoft.com/cmaps/" url="http://www.xiaobusoft.com/vant-preview-pdf.pdf" />

可配置参数

| 字段 | 说明 | 类型 | 默认值 | | :------------: | :----------------------------------------------------------: | :------: | :----------------------------------------------------: | | eid | canvas的Id | String | pdfjs | | base64Pdf | pdf base64数据流, 有无data:application/pdf;base64, 开头均可 | String | “” | | url | pdf 文件路径 base64Pdf优先级高于url 确保base64Pdf没配置 | String | “” | | limitHttp | pdf 限制url是否有http，结合url入参使用 | Boolean | true | | imagePreviewFn | vant的imagePreview方法 | Function | 空 | | autoScroll | 图片预览关闭，自动滚动到对于索引位置 | Boolean | true | | cMapUrl | cMaps 文件夹访问地址 地址 记得 “/” 结尾 | String | https://cdn.jsdelivr.net/npm/[email protected]/cmaps/ |

事件

| 方法 | 描述 | | :-----------------: | :-----------------------------------: | | savePreviewImageFn | 向外传递pdf预览图片 | | previewImageOnClose | 关闭预览，抛出对应位置图片 | | renderPdfError | pdf渲染失败异常抛出 | | renderPdfFinally | pdf渲染完成事件，可在此时关闭加载动画 |