小程序下载预览pdf，文档打不开解决方案

小程序打开pdf，有3种方式

1、webview打开，这里不做赘述

2、文档二进制流打开，参考其他文章

3、今天的重点，wx.downloadFile，wx.openDocument

操作过程中遇到的一些坑，首先是我用网上常规的操作wx.downloadFile，wx.openDocument，开发工具显示正常，真机可能会走到‘打开文档失败’；真机调试发现是 filePath= wx.env.USER_DATA_PATH + '/' + ‘xxx.pdf’,报错没有修改名字的权限，如图二：

又或出现这种bug，打开文档后，再次打开其他pdf文档，显示的还是第一次打开的pdf文件，也就是说打开的是最先缓存过的文件，这个缓存机制自己下去研究。

if (that.data.pdfSrc1) {wx.showLoading({title: 'pdf预览准备中',})wx.downloadFile({url: that.data.pdfSrc1,//pdf链接success(res) {let  filePath= wx.env.USER_DATA_PATH + '/' + '报告详情.pdf';wx.openDocument({filePath: filePath,success: function (res) {wx.showToast({title: '打开文档成功',})wx.hideLoading()},fail: function (res) {wx.showToast({title: '打开文档失败',})},})},})
}

解决方案：使用 wx.saveFile 微信保存文件临时存储路径，再使用官方的wx.env.USER_DATA_PATH修改本地路径名称，至此，解决显示问题、缓存问题以及名字修改问题

wx.downloadFile({url: that.data.pdfSrc1,//pdf链接success(res) {wx.saveFile({ //重点 wx.saveFile一定要有   避免文件存储找不到  然后打开失败tempFilePath: res.tempFilePath,filePath: wx.env.USER_DATA_PATH + '/' + '报告详情.pdf',success(res) {wx.openDocument({filePath: res.savedFilePath,fileType: "pdf",showMenu: true,success: function (res) {wx.showToast({title: '打开文档成功',})wx.hideLoading()},fail: function (res) {wx.showToast({title: '打开文档失败',})},})}}) },
})

补充个二进制流的方案需要后台配合写个解析接口

  wx.request({url: 'http:/XXXXX/downloadReport.cs?id='+ obj.id,method: 'POST',header: {"content-type": "application/json",},responseType: "arraybuffer", //注意这里的responseTypesuccess: (result) => {console.log("下载成功！", result);var fileManager = wx.getFileSystemManager();var FilePath =  wx.env.USER_DATA_PATH + '/' + '报告详情1111'+'.pdf';//这里同样可能有问题  我这个打开后显示文档损坏   参考上面的方案解决  fileManager.writeFile({data: result.data,filePath: FilePath, showMenu: true, // 显示右上角菜单encoding: "binary", //编码方式 success: res => {console.log('编码格式');wx.openDocument({ //成功之后直接打开filePath: FilePath, showMenu:true,fileType: "pdf",success: result => {console.log("打开文档成功");},fail: err => {console.log("打开文档失败", err);}});},fail: res => {wx.showToast({title: '导出失败!',icon: 'none',duration: 2000,})console.log(res);}})},fail(err) {console.log(err)}})

小程序下载预览pdf，文档打不开解决方案相关推荐

计算机无法快速预览pdf,电脑中无法使用火狐浏览器预览PDF文档怎么解决
‍ 在火狐浏览器中具有在网页中支持打开PDF文档的功能.有用户在使用Firefox打开PDF文档时却被提示需要保存文件,而不能直接在页面中预览.如果遇到上述的情况,我们应该如何操作才能在火狐浏览器中直 ...
渲染预览PDF文档,轻松搞定,这方案真香!
渲染预览PDF文档,轻松搞定,这方案真香! 1.前言 2.列举一些文档预览解决方案: 3.列举一些文档解析生成解决方案: 4.案列赏析 5.准备工作: 6.模板讲解: 7.代码实现: 8.效果图: 9 ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
记录一次微信小程序实现预览pdf
微信小程序预览pdf需要注意的是,在安卓端和ios端是有差异的. 安卓端不能用web-view直接打开,需要先下载到本地,再打开文件进行预览. 网上说的ios端可以直接用web-view进行预览,但是 ...
使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
安卓手机如何在线预览PDF文档
需要当我们上传到服务器上一个PDF文档发,在苹果手机和网页上都能正常的打开,但是一到安卓手机上就会出现下面的问题. 还得需要我们下载查看,无法在线查看,就我这个臭脾气再重要的文件我也不回去下载查看的. ...
vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
UNIAPP在线预览PDF文档DCloud插件
UniApp 在线预览PDF&插件使用该实现方式基于pdf.js,使用网页嵌套web-view标签. 插件优点:内容懒加载,可自行决定工具栏内容,@message能监听用户操作,支持H5.安 ...

小程序下载预览pdf，文档打不开解决方案

小程序下载预览pdf，文档打不开解决方案相关推荐

最新文章

热门文章