更新记录
1.0.2(2024-09-18)
- 修复本地路径可能的错误.
1.0.1(2024-09-18)
- 修复本地路径可能的错误.
1.0.0(2024-09-14)
发布第一版本,双端支持打印pdf文件及预览操作pdf文件,嵌入视频预览pdf,方便定义界面。
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.0,Android:5.0,iOS:9,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
x-pdf-u
开发文档
本插件会让你的安卓应用增加大约3.7mb体积 本插件会让你的IOS应用增加大约4kb体积
使用原生底层api打印和预览,没有第三方框架比如腾讯x5浏览器套壳或者webKit.纯 原生实现,为你的应用大小减负
接受打印定制功能:比如图片打印,文档打印,小票,票据等定制预览打印
此插件包含打印及预览一体,TMUI4.0VIP 8折优惠(加密没有优惠源码才有)。
功能说明
- 内嵌式页面预览pdf文件,方便你定义预览pdf界面。
- 支持打印预览,预览与打印结果一致。
- 安卓或者手机会弹出打印预览界面,自行在手机上选择无线打印机或者隔空AirWifi打印机
兼容性
IOS | IPAD | macOs | Andriod | WEB |
---|---|---|---|---|
11+ | 11+ | 10.4+ | 4.4+ | - |
函数方法
请通过let ele = this.$refs["pdf"] as XPdfUElement
来获取ele组件实例。
方法名称 | 参数 | 返回参数 | 说明 |
---|---|---|---|
getCurrent | - | page:number | 返回当前预览的页码 |
getPageCount | - | pageCount:number | 返回文件的总页数,请务必文档加载onInit后调用 |
jumpTo | page:number | - | 跳转至指定页码,从0开始 |
render | url:string | - | 手动加载并渲染页面,url可以是网络地址或者本地pdf文档地址 |
- | - | 打印文档,请务必要Oninit后让文档显示 成功后才可以调用打印功能。 |
组件事件
事件名称 | 参数 | 说明 |
---|---|---|
onInit | evt : Map<string,number> | 一个文档加载成功后触发,每变更或者重新渲染文档,成功后都会触发,{page: 0, pageCount: 32},这里的page始终为0 |
pageChange | evt : Map<string,number> | 用户滑动pdf文档或者首次加载成功,都会触发页面变化 事件{page: 7, pageCount: 32} |
使用示例
如果是安卓请务必打自定义基座
如果是ios:你在mac环境下配置好了环境无需打包本地编译,如果win开发ios需要打包基座。
// 在你的页面中引入pdf组件,组件遵守uni_modules规则,无需导入
<x-pdf-u ref='pdf' @pageChange="change" :url="url" style="width:100%;height:450px;"></x-pdf-u>
// 你的uts代码
<script>
export default {
data() {
return {
url:''
}
},
onLoad() {
},
methods: {
// 打印pdf
sharePdf(){
let ele = this.$refs["pdf"] as XPdfUElement
ele.print()
},
// 用户在滑动pdf文件,页面变化时触发
change(evt : UTSJSONObject){
// {page: 7, pageCount: 32}
console.log(evt)
},
// 跳转到指定页面
pageTo(){
let ele = this.$refs["pdf"] as XPdfUElement
ele.jumpTo(2)
},
// 下载远程pdf文件给组件打印,也可以不本地下载,直接提供url远程链接,框架内部自行下载(不推荐)
loadUrl(){
let _this = this;
uni.showLoading({title:"..."})
uni.downloadFile({
url:"https://www.espressif.com/sites/default/files/documentation/0a-esp8266ex_datasheet_cn.pdf",
success(evt) {
uni.hideLoading()
let decodedPath = evt.tempFilePath
_this.url = decodedPath;
},
fail() {
uni.hideLoading()
}
})
}
}
}
<\/script>