未分類
17 1 月 2021

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

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

資深大佬 : sybb 0

小弟接手维护了一个移动端的小网站，有一个导出 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)

  • 資深大佬 : thinkingbullet

    iOS 不允许直接在浏览器中打开文件(下载文件)

  • 資深大佬 : sam014

    APP webview 配置的问题？

  • 資深大佬 : Carseason

    nginx 为这类文件强制下载方式呗。不然带 pdf 预览的都是会直接预览

  • 主 資深大佬 : sybb

    @thinkingbullet 虽然我不太清楚你说的打开和下载是怎样的情况，但是这边再 nginx 中设置 content-type 什么后 目前已实现了在浏览器中下载并不会自动打开的哈，Safari 的表现是先弹出一个下载提示确认框，点击确认后，就在地址栏后面有一个正在下载的图标了。

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

    @Carseason 已经设置了哈， 在浏览器中打开能直接下载，但是在他们的 APP 中就不行，并且打开后还乱码

  • 資深大佬 : whypool

    正常，要实现下载，app 开接口，申请写入文件权限才行

  • 資深大佬 : meepo3927

    应该是 iOS 需要针对处理， 不能像 Android 或者桌面端一样直接下载。

    同 1 和 5 。

  • 資深大佬 : woxihejinghao

    iOS 需要 APP 那边进行处理