uniapp(App端)关于PDF的一系列问题
当我们不知道如何处理arrayBuffer类型的对象时,我们可以尝试转换成其他我们熟悉形式的数据例如Base64,Blob,亦或者说把arrayBuffer类型的对象缓存到本地,利用uni.getFileSystemManager()方法将ArrayBuffer转换为URL地址。可以使用XMLHttpRequest对象来替换getFileSystemManager,XMLHttpRequest对象
APP端,PDF的一系列问题
PDF,如何预览的问题
一,APP端,根据 官方文档 的API,可以很清晰的使用PDF预览(uni.openDocument)方法。
uni.downloadFile({
//这里的URL链接可以是下载PDF的链接
url: 'http://***.36.**.***:2001/mom/test/download/1628330857873399810 ',
success: function (res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功');
}
});
}
});
二,平台的差异
平台 | 打开方式 |
---|---|
小程序 | 在小程序的入口应用内打开 |
App iOS | 在当前应用内打开 |
App Android | 调用系统相关应用打开,无相关应用则不能打开 |
H5 | 使用浏览器打开,当前浏览器不支持则不能打开 |
PDF,ArrayBuffer类型对象的问题
一,ArrayBuffer类型的对象,用于存储文件流pdf文件(任何文件都可以)。
如果后端返回的是arrayBuffer类型的对象,那我们接收arrayBuffer的请求就要加上,responseType:‘arrayBuffer’.如下👇
uni.request({
url: url,
method: method,
header: {
'Authorization': uni.getStorageSync('Authorization') ? 'bearer ' + uni.getStorageSync('Authorization')
'Content-Type': 'application/x-www-form-urlencoded'
},
responseType: 'arrayBuffer',//一定要加上这一句
success(res)=>{
console.log(res)
}
})
二,当我们不知道如何处理arrayBuffer类型的对象时,我们可以尝试转换成其他我们熟悉形式的数据例如Base64,Blob,亦或者说把arrayBuffer类型的对象缓存到本地,利用uni.getFileSystemManager()方法将ArrayBuffer转换为URL地址。但是在APP中不支持getFileSystemManager方法它会提示:API
getFileSystemManager
is not yet implemented
下面会讲解。
PDF,转码的问题
一,arrayBuffer转换Base64
在APP中我们要把arrayBuffer转换成Base64时,可以使用:uni.arrayBufferToBase64
let base64 = uni.arrayBufferToBase64(arrayBuffer);//这里的要传arrayBuffer类型的对象
二,arrayBuffer转换URL
使用FileReader可以将ArrayBuffer转换为URL地址。使用FileReader的步骤如下:
- 实例化一个FileReader对象
- 使用FileReader的
readAsArrayBuffer()
方法将ArrayBuffer传入 - 使用FileReader的
onload()
方法监听数据加载完成的事件 - 使用FileReader的
result
属性获取最终的URL地址
但是在APP中使用不了FileReader
,所以我们使用其他的方法来转换ArrayBuffer为URL地址,例如使用URL.createObjectURL()
或base64
编码等。也可以检查一下ArrayBuffer的值并确保文件类型被支持。
三,利用
getFileSystemManager
在uniapp中可以使用uni.getFileSystemManager()方法将ArrayBuffer转换为URL地址,代码示例如下:
let fileSystemManager = uni.getFileSystemManager();
let url = fileSystemManager.readFileSync(arrayBuffer, 'utf8');
但是他会提示API getFileSystemManager
is not yet implemented
这可能是由于你使用的是一个不支持该API的环境,例如微信小程序或浏览器。在这种情况下,
可以使用XMLHttpRequest对象来替换getFileSystemManager,XMLHttpRequest对象可以用来发送HTTP请求,从而实现获取文件系统中的文件。另外,也可以使用FileReader对象来读取文件,并获取文件内容。
XMLHttpRequest怎么替换getFileSystemManager
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 发送HTTP请求
xhr.open('GET', 'your_file_url', true);
xhr.send(null);
// 监听HTTP响应
xhr.onload = function (e) {
if (xhr.status === 200) {
// 获取文件内容
let fileContent = xhr.responseText;
// 解析文件内容
// ...
}
};
四,arrayBuffer转换成Blob对象
使用JavaScript的new Blob()方法将ArrayBuffer转换为Blob对象。
但是在APP中不支持new Blob,因为小程序不支持Blob文件类型建议后端直接传一个预览的地址。
总结:最好是后端写成预览地址返回,如果不能生成预览地址的话,就使用arrayBuffer
的类型的对象。
更多推荐
所有评论(0)