uniapp通过url或base64打开pdf文件

本文介绍了如何通过uniapp框架,分别处理通过url下载和base64编码的PDF文件,并展示了如何使用`uni.openDocument`打开文档,包括下载失败和路径转换的处理。同时涵盖了`base64ToPath`工具函数,用于处理base64编码到本地路径的转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、通过url打开pdf文件:

  //通过url打开pdf文件
  openPdfFileByUrl(pdfUrl: string) {
    uni.showLoading({
      title: "下载中,请稍后...",
      mask: true,
    });
    uni.downloadFile({
      url: pdfUrl,
      success: function (res: any) {
        uni.hideLoading();
        console.log("下载成功!");
        //新开页面打开pdf文档:https://uniapp.dcloud.net.cn/api/file/file.html#opendocument
        uni.openDocument({
          filePath: res.tempFilePath,
          fileType: "pdf",
          success: function (res) {
            console.log("打开文档成功");
          },
        });
      },
      fail: function (res: any) {
        uni.hideLoading();
        uni.showToast({
          title: "下载失败",
          icon: "none",
        });
      },
    });
  }

2、接口返回的是base64,打开pdf:


  import { base64ToPath } from ".../js/image-tools.js";

  ......

 //通过base64打开pdf文件
 openPdfFileByUrl(base64Data: string) {
    let result = base64Data.replace(/[\r\n]/g, "");
    let pdfBase64 = `data:application/pdf;base64,${result}`;
    base64ToPath(pdfBase64)
      .then((path) => {
        uni.openDocument({
          filePath: path,
          success: function (FileRes) {
            console.log("打开成功");
          },
          fail: (res) => {
            console.log("打开失败");
          },
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

其中,image-tools.js代码:

function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}

function dataUrlToBase64(str) {
    var array = str.split(',')
    return array[array.length - 1]
}

var index = 0
function getNewFileId() {
    return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
    var v1Array = v1.split('.')
    var v2Array = v2.split('.')
    var update = false
    for (var index = 0; index < v2Array.length; index++) {
        var diff = v1Array[index] - v2Array[index]
        if (diff !== 0) {
            update = diff > 0
            break
        }
    }
    return update
}

export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = getNewFileId() + '.' + extName
        if (typeof plus === 'object') {
            var basePath = '_doc'
            var dirPath = 'uniapp_temp'
            var filePath = basePath + '/' + dirPath + '/' + fileName
            if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
                plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
                    entry.getDirectory(dirPath, {
                        create: true,
                        exclusive: false,
                    }, function(entry) {
                        entry.getFile(fileName, {
                            create: true,
                            exclusive: false,
                        }, function(entry) {
                            entry.createWriter(function(writer) {
                                writer.onwrite = function() {
                                    resolve(filePath)
                                }
                                writer.onerror = reject
                                writer.seek(0)
                                writer.writeAsBinary(dataUrlToBase64(base64))
                            }, reject)
                        }, reject)
                    }, reject)
                }, reject)
                return
            }
            var bitmap = new plus.nativeObj.Bitmap(fileName)
            bitmap.loadBase64Data(base64, function() {
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: dataUrlToBase64(base64),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}
### 实现 Base64 数据转换为 PDF 文件UniApp 中处理 Base64 编码数据并将其保存为 PDF 文件涉及多个步骤。可以利用 JavaScript 的 `FileSaver.js` 库来简化这个过程,不过对于移动应用环境下的具体操作还需要考虑平台特性。 #### 使用 Blob 对象创建 PDF 文件 通过将 Base64 字符串解码成二进制流再构建一个 Blob 对象,最后调用浏览器内置接口第三方库完成下载动作。下面是一个简单的例子说明如何做到这一点: ```javascript function base64ToPdf(base64String, filename) { const byteCharacters = atob(base64String.split(',')[1]); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); const blob = new Blob([byteArray], { type: 'application/pdf' }); if ('download' in document.createElement('a')) { // 非IE内核支持 const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${filename}.pdf`; link.click(); URL.revokeObjectURL(link.href); // 清除内存中的对象url } else { // IE10+ navigator.msSaveBlob(blob, `${filename}.pdf`); } } ``` 这段代码展示了怎样把 Base64 编码字符串转化为实际可读取的 PDF 文档,并提供给用户下载的功能[^1]。 #### 结合 UniApp 平台特点优化方案 考虑到不同操作系统间可能存在差异,在开发过程中应当注意兼容性问题。比如 iOS 设备上可能无法直接触发 `<a>` 标签点击事件来进行文件下载;此时则需借助于 WebView 者 Native API 来实现相同效果[^2]。 另外值得注意的是,当目标是在 App 移动端而非 Web 浏览器环境中运行时,上述方法并不完全适用。针对这种情况,建议采用如下策略之一: - **使用原生组件**:如果项目允许接入更多底层能力,则可以通过编写插件的方式访问设备自身的存储服务,从而绕过跨域限制等问题。 - **服务器辅助方式**:先上传 Base64 数据至云端服务器,由后者负责解析生成最终版本的 PDF 文件后再返回链接供客户端下载[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值