當前位置:首頁 > 科技 > 正文

uni-app 小程序使用 web-view實現在線預覽dpf,及H5電子簽字

記錄一下小程序在線預覽PDF,以及實現電子簽字,已将兩者集成在一起了

1、電子簽約使用的jq插件,附上下載鍊接

防止無法下載,提供一個網盤下載

2、PDF預覽使用的pdf.js,官網下載鍊接

官網下載的文件太大了,而且很多文件用不上,我原本在網上找了一個文件稍微少一點的,但是現在地址找不到了,我自己放網盤吧

1、在線預覽pdf

注意:

小程序僅支持加載網絡網頁,不支持本地html

App 平台同時支持網絡網頁和本地網頁,但本地網頁及相關資源(js、css等文件)必須放在 uni-app 項目根目錄->->html 文件夾下(自行參考其他)

1、将下載好的PDF插件放置服務器(服務器地址:)

例:

2、根據uni-app web-view官方文檔 寫個公共組件

3、訪問第一步準備的web-view組件,即可在線預覽PDF

也可以直接在浏覽器訪問,參考鍊接如下:

://.xxx//demo.pdf&=0

例:

uni-app 小程序使用 web-view實現在線預覽dpf,及H5電子簽字

uni.({

url:'..//?url='

})

備注:因為結合了電子簽字,所以參數需要,自己視情況而定

預覽效果

2、預覽PDF集成電子簽字

1、為了方便使用,将下載的電子簽字插件直接放入PDF插件文件夾,如下

2、修改pdf.html集成電子簽字,直接貼代碼

集成注意事項:

1、因為使用uni-app,且在簽約後,需要調用uni-app 的API 跳轉頁面(web-view 與 H5通訊),所以引入uni-app SDK

2、因為是微信小程序,所以引入了微信小程序 JS-SDK,如果是其他的小程序,則需要引入對應的小程序JS-SDK,具體參考uni-app web-view,最底下有具體介紹

3、整體效果

問題:電子簽約固定在底部,會把PDF遮擋住一部分,如果有人優化了,麻煩@我一下,我處理不好

附一個uni-app 小程序實現電子簽字,寫的很好,可以直接拿去用

————————————————

版權聲明:本文為CSDN博主「abel.gong」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鍊接及本聲明。

原文鍊接:

你可能想看:

有話要說...

取消
掃碼支持 支付碼