V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sybb
V2EX  ›  Node.js

[求助] 移动端 h5 页面被嵌入到 APP 中, h5 端的下载 pdf 功能受到影响

  •  
  •   sybb · 5 天前 · 723 次点击

    小弟接手维护了一个移动端的小网站,有一个导出 pdf 文件的功能,被客户引入到了他们的 APP 中,下载功能异常。

    技术栈

    服务端:Node.js / TypeORM / Apollo / GraphQL / MySQL

    前端:Vue / Nuxt.js / Vuetify

    前后端都使用 TypeScript,采用 Docker 部署。

    pdf 实现方法

    后端用puppeteer 生成 pdf 文件到服务端某个用 nginx 配置好的静态文件夹中,返回 url 给前端用动态生成 a 标签的方法生成下载。

    问题

    在移动端的 Safari 和 Chrome 中都能正常下载并打开以及保存到本地,但是在客户的 APP 中,下载时候会打开 pdf 文件(我猜是预览),导致没办法操作页面了,并且打开的文件显示乱码。

    补充

    • 截图来看,客户的手机是 IOS 系统,APP 用什么实现的未知;
    • h5 被 APP 引入的方式未知,不知道是不是因为内嵌,导致的 h5 运行的环境收到影响;
    • 移动端浏览器中操作 OK,但是移动端 APP 中下载就会打开 pdf 文件并显示乱码;

    所以,有没有老哥知道为什么 APP 中功能表现异常? h5 有办法能实现内嵌在别的应用后还能使用下载功能吗?

    7 条回复    2021-01-14 15:27:15 +08:00
    thinkingbullet
        1
    thinkingbullet   5 天前
    iOS 不允许直接在浏览器中打开文件(下载文件)
    sam014
        2
    sam014   5 天前
    APP webview 配置的问题?
    Carseason
        3
    Carseason   5 天前 via Android
    nginx 为这类文件强制下载方式呗。不然带 pdf 预览的都是会直接预览
    sybb
        4
    sybb   5 天前
    @thinkingbullet 虽然我不太清楚你说的打开和下载是怎样的情况,但是这边再 nginx 中设置 content-type 什么后 目前已实现了在浏览器中下载并不会自动打开的哈,Safari 的表现是先弹出一个下载提示确认框,点击确认后,就在地址栏后面有一个正在下载的图标了。


    @sam014 我甚至还不确定使用什么方式引入进去的


    @Carseason 已经设置了哈, 在浏览器中打开能直接下载,但是在他们的 APP 中就不行,并且打开后还乱码
    whypool
        5
    whypool   5 天前 via Android
    正常,要实现下载,app 开接口,申请写入文件权限才行
    meepo3927
        6
    meepo3927   5 天前
    应该是 iOS 需要针对处理, 不能像 Android 或者桌面端一样直接下载。

    同 1 楼和 5 楼 。
    woxihejinghao
        7
    woxihejinghao   5 天前
    iOS 需要 APP 那边进行处理
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4544 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 01:28 · PVG 09:28 · LAX 17:28 · JFK 20:28
    ♥ Do have faith in what you're doing.