uniapp文件预览以及修改预览标题

常用预览

uniapp里面我们使用downloadFileopenDocument这两个api可以很简单实现对文档类型的文件预览。

js 复制代码
const previewFile = (item: any) => {
  uni.downloadFile({
    url: 'https://文件地址.pdf',
    success: (res: any) => {
      uni.openDocument(
        filePath: res.tempFilePath,
        fileType: 'pdf',
        fail: (err) => {
          console.log(err)
          uni.showToast({
            title: '文件预览失败!',
            icon: 'error',
          })
        },
      })
    },
    fail: (err) => {
      console.log(err)
      uni.showToast({
        title: '文件预览失败!',
        icon: 'error',
      })
    },
  })
}

我们来看看效果:

看起来是没什么问题,只是我们会发现预览的时候文件标题竟然是一串奇怪的字符。其实这是该文件的临时文件名。因为使用downloadFile这个api会将文件临时存到本地,并且会返回该文件的临时地址,预览时候显示的标题就是文件的临时名称。很多时候我们需要自己定义文件标题,而不是临时文件名。

修改预览标题

  1. 我们可以直接将文件进行长期保存并直接重命名文件名,这种方式我们此处不过多叙述了。在我看来为了预览文件而保存一个文件是不合理的。

  2. 我们还可以直接使用downloadFilefilePath参数来定义文件名。

    js 复制代码
    const previewFile = (item: any) => {
      uni.downloadFile({
        url: item.url,
        // uni.env.USER_DATA_PATH表示的是临时路径
        filePath: `${uni.env.USER_DATA_PATH}/${我是自定义标题}.pdf`,
        success: (res: any) => {
          uni.openDocument({
            filePath: res.filePath,
            fileType: 'pdf',
            fail: (err) => {
              console.log(err)
              uni.showToast({
                title: '文件预览失败!',
                icon: 'error',
              })
            },
          })
        },
        fail: (err) => {
          console.log(err)
          uni.showToast({
            title: '文件预览失败!',
            icon: 'error',
          })
        },
      })
    }
相关推荐
wu~970几秒前
开发思路篇:转账接口设计
java·开发语言
带娃的IT创业者3 分钟前
实战:用 Python 搭建 MCP 服务 —— 模型上下文协议(Model Context Protocol)应用指南
开发语言·python·mcp
minji...6 分钟前
C++ STL之list的使用
开发语言·c++
万粉变现经纪人8 分钟前
如何解决pip安装报错ModuleNotFoundError: No module named ‘python-dateutil’问题
开发语言·ide·python·pycharm·pandas·pip·httpx
可子是我的小猫14 分钟前
【JS】模块(一)
javascript
Sammyyyyy19 分钟前
macOS是开发的终极进化版吗?
开发语言·macos·开发工具
不一样的少年_28 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
青草地溪水旁29 分钟前
23 种设计模式
开发语言·c++·设计模式
草履虫建模32 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
编码浪子33 分钟前
趣味学RUST基础篇(函数式编程闭包)
开发语言·算法·rust