网站免费建站pixiv app,wordpress显示摘要,全国设计大赛官网,制作网页网站代码在使用uniapp开发移动端时#xff0c;微信开发者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后#xff0c;在配置了业务域名和服务器域名的前提下#xff0c;预览pdf文件却只能看到白屏#xff0c;因此我猜测微信小程序不能通过webview读取文件流。这个想法… 在使用uniapp开发移动端时微信开发者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后在配置了业务域名和服务器域名的前提下预览pdf文件却只能看到白屏因此我猜测微信小程序不能通过webview读取文件流。这个想法有问题的话请大家给与指正。 后来我通过uniapp api将文件下载在临时目录再调用api打开实现了微信小程序的预览。但在安卓端会调用安装的WPS打开如果用户没有安装pdf阅读器则无法打开造成了不好的用户体验。因此手机端我用pdf.js实现在线预览。
后端的api接口如下
/*** 功能pdf预览*/IgnoreAuthRequestMapping(/pdf/preview/**)public void pdfPreviewIframe(HttpServletRequest request, HttpServletResponse response) {String imgPath extractPathFromPattern(request);// 其余处理略InputStream inputStream null;OutputStream outputStream null;try {inputStream MinioUtil.getMinioFile(imgPath);outputStream response.getOutputStream();response.setContentType(application/pdf; charsetUTF-8);byte[] buf new byte[1024];int len;while ((len inputStream.read(buf)) 0) {outputStream.write(buf, 0, len);}response.flushBuffer();} catch (Exception e) {log.error(预览文件失败 e.getMessage());} finally {if (inputStream ! null) {try {inputStream.close();} catch (IOException e) {log.error(e.getMessage(), e);}}if (outputStream ! null) {try {outputStream.close();} catch (IOException e) {log.info(imgPath{}, imgPath);log.error(e.getMessage(), e);}}}}
一、下载pdf.js
http://mozilla.github.io/pdf.js/getting_started
二、解压文件并引入到项目
说明网上很多案例说在项目目录下创建hybrid文件夹把解压后的文件全部放到里面的方式我试了后行不通。
在static目录下新建pdfview目录将解压后的文件拷贝到该目录下。如下图所示 注释viewer.mjs代码pdf.js不支持加载跨域文件会报 “file origin does not match viewer’”错误 三、 webview内预览pdf
templateviewweb-view :srcfileUrl/web-view/view
/templatescriptexport default {data() {return {fileUrl: ,pdfViewUrl: /static/pdfview/web/viewer.html}},onLoad(options) {this.fileUrl decodeURI(options.fileUrl)if (!!options.isPdfView) {this.fileUrl this.pdfViewUrl ?file encodeURI(this.fileUrl)}},methods: {}}
/scriptstyle/style 四、app、微信小程序分别预览
//pdf预览pdfView(item) {uni.showLoading({title: 加载中...})item.fileUrl this.baseFileURL /pdf/preview/ item.resourceId// #ifdef APP-PLUSuni.navigateTo({url: /subpages/webview/webview?fileUrl encodeURI(item.fileUrl) isPdfViewtrue,})// #endif// #ifdef MP-WEIXINlet fileName item.resourceId.substring(item.resourceId.lastIndexOf(/) 1);uni.downloadFile({url: item.fileUrl, //文件地址filePath: wx.env.USER_DATA_PATH / fileName,success: function(res) {const filePath res.filePath || res.tempFilePath;uni.openDocument({filePath: filePath,showMenu: false,success: function(res) {}});}});// #endifuni.hideLoading()},
五预览效果
