vue-pdfimgcut

vue-pdfimgcut

使用说明

npm install vue-pdfimgcut

import pdfimgcut from "vue-pdfimgcut";
import "vue-pdfimgcut/vue-pdfimgcut.css";

components: { pdfimgcut },

		<pdfimgcut
            ref="pdfimgcut"
            :option="option"
            @schedule="schedule"
            @outputImage="outputImage"
            @output="output"
          ></pdfimgcut>

配置参数

option

属性	参数	默认	说明
src	对象数组[{url}]	[]	其中url为解析内容，必填，支持pdf和图片解析
corners	数组	[]	页面旋转配置，如[90]，第一页旋转90度
incompleteLoad	布尔值	false	全部解析完成前是否渲染图片（开启的话，在全部解析完成前有卡顿）
zoom	数组	1.1	每次缩放比例
slideColor	字符串	red	截图时框颜色,默认红色
boxColor	字符串	blue	框颜色,默认蓝色
slideContinuous	布尔值	false	是否连续截图，默认不连续

方法说明

this.$refs.pdfimgcut.blowUp();//放大
this.$refs.pdfimgcut.minification();//缩小
this.$refs.pdfimgcut.resetting();//复位
this.$refs.pdfimgcut.tailoring();//截图
this.$refs.pdfimgcut.tailoringClose();//取消截图
this.$refs.pdfimgcut.previous();//上一页
this.$refs.pdfimgcut.next();//下一页
this.$refs.pdfimgcut.appoint(1);//跳转到指定页
this.$refs.pdfimgcut.rotate();//旋转当前页
this.$refs.pdfimgcut.regionChange([]);//画框
this.$refs.pdfimgcut.regionChange([],true);//画框并跳转到框的位置

回调说明

//初始化进度
schedule(data) {
     //data为已解析文件占的总文件比例，1为全部解析
},
 //获取当前页面加载数据
output(data) {
	//data中包括
	//pageNum当前页
	//pageNumMax总页数
	//document 当前文件属性，为src传入值，多输出page 当前文件的第几页
},
 //获取截图结果
outputImage(data) {
	//data中包含url截图属性
	//和list位置值
	list由第几页和坐标点组成
},