uniapp(App端)关于PDF的一系列问题

APP端,PDF的一系列问题

  • PDF,如何预览的问题
  • PDF,ArrayBuffer类型对象的问题
  • 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的步骤如下:

  1. 实例化一个FileReader对象
  2. 使用FileReader的readAsArrayBuffer()方法将ArrayBuffer传入
  3. 使用FileReader的onload()方法监听数据加载完成的事件
  4. 使用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的类型的对象。

你可能感兴趣的:(uni-app,uni-app,pdf,javascript)