移动端H5下载后端文件

首先是手机H5移动端上,针对能直接打开的文件例如pdf等,下载是直接打开预览了。如果要真正保存到手机里,需要点击右上角三个点去那里面选择保存。对于非预览文件会直接下载。
而在有些浏览器里,是可以直接下载出文件的。感觉这个与浏览器有关
我看有的博主说,使用绝对路径去下载,可以直接下载下来,但是我试了没效果
在这里插入图片描述

以下是用iframe、a标签等几种下载方式。

    // 使用iframe下载后端返回的文件流(绝对路径下载)downLoadIframe (item) {let elemIF = document.createElement("iframe")elemIF.src = 'https://www.baidu.cn' + G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`console.log(elemIF.src)elemIF.style.display = "none"document.body.appendChild(elemIF)},// 使用a标签下载后端返回的文件流(绝对路径下载)downloadHttps (item) {const url = 'https://www.baidu.cn' + G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`console.log(url)const a = document.createElement('a')a.href = urla.download = item.fileNamea.click()},downladInvoice (item) {// 可下载,名称也有效 -- 推荐---h5预览页右上角可以保存const x = new window.XMLHttpRequest()x.open('GET', G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`, true)x.responseType = 'blob'x.onload = () => {const url = window.URL.createObjectURL(x.response)const a = document.createElement('a')a.href = urla.download = item.licenseNo + item.policyNo + '.pdf'a.click()}x.send()// ---h5预览页无右上角 但是名称不需要// let elemIF = document.createElement("iframe")// elemIF.src = G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`// console.log(elemIF.src)// elemIF.style.display = "none"// document.body.appendChild(elemIF)},// 使用base64下载downladBase64 (item) {MyGet(G_CGI_PHP.invoiceApi.mobileDownInvoiceBase64 + `?policyId=${item.id}`).then((res) => {if (res.success) {let base64 = this.getBase64Type(res.data.fileType) + res.data.data//拼接成完成的base64console.log('base64', base64)this.downloadFileByBase64(base64, res.data.fileName)} else {Toast(res.return_message)}})},// * desc: 下载方法// * @param url  :返回数据的blob对象或链接// * @param fileName  :下载后文件名标记downloadFile (url, name = "What's the fuvk") {var a = document.createElement("a")a.setAttribute("href", url)a.setAttribute("download", name)a.setAttribute("target", "_blank")let clickEvent = document.createEvent("MouseEvents")clickEvent.initEvent("click", true, true)a.dispatchEvent(clickEvent)},// * desc: 下载参数入口// * @param base64  :返回数据的blob对象或链接// * @param fileName  :下载后文件名标记downloadFileByBase64 (base64, fileName) {var myBlob = this.dataURLtoBlob(base64)var myUrl = URL.createObjectURL(myBlob)this.downloadFile(myUrl, fileName)},//根据文件后缀 获取base64前缀不同 拼接完成的base64getBase64Type (type) {switch (type) {case 'txt': return 'data:text/plain;base64,'case 'doc': return 'data:application/msword;base64,'case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'case 'xls': return 'data:application/vnd.ms-excel;base64,'case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'case 'pdf': return 'data:application/pdf;base64,'case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,'case 'png': return 'data:image/png;base64,'case 'jpg': return 'data:image/jpeg;base64,'case 'gif': return 'data:image/gif;base64,'case 'svg': return 'data:image/svg+xml;base64,'case 'ico': return 'data:image/x-icon;base64,'case 'bmp': return 'data:image/bmp;base64,'}},//将base64转换为blobdataURLtoBlob (dataurl) {var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], { type: mime })},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[CSS] 眼下最流行的五大CSS框架,你都知道么?

From: http://developer.51cto.com/art/201710/555733.htm 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了。作为开发工具,CSS框架一直处于不断进化和改进的状态,因此我们强烈建议您关注眼下的趋势。这篇文章会带您了…

前端复制字符串到excel生成表格

场景需求:前端页面有个按钮,点击时候会复制一段文本,然后将复制的文本直接copy黏贴到excel表格里,就会自动形成对应的表格数据。 以下代码可以直接复制使用(有效的点赞支持一波): copyAll () {…

[QUICK UI] 有哪些目前流行的前端框架

From: https://blog.csdn.net/qianduankuangjia/article/details/78185047 使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中可能会用到不同的组件功能,这样说可能有一点片面,但是在面临几十种再做出选择的时候确实有一定的难度…

XP设置文件夹默认打开方式改为“资源管理器”

为什么80%的码农都做不了架构师?>>> 在“资源管理器”中单击“工具→文件夹选项→文件类型”,在“已注册的文件类型”下的列表框中找到一个名为“资料夹”的选项(按文件类型排序的话它会排在最后面几个),选…

2018年五大最佳前端框架比较,程序员会怎么选?

From: https://blog.csdn.net/qq_41852103/article/details/79619250 现在有大量的CSS前端框架可用。但真正好的屈指可数。本文将比较五个最佳前端框架,每个框架都有自己的长处和短处,以及特定的应用领域,使你可以根据特定项目的需求进行选择…

解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效

ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外面主动套一个div 在修改样式即可:getContainer"()>$refs.ref"

网络安全——ipsec

网络安全——ipsecInternet 协议安全性 (IPSec)”是一种开放标准的框架结构,通过使用加密的安全服务以确保在 Internet 协议 (IP) 网络上进行保密而安全的通讯,它通过端对端的安全性来提供主动的保护以防止专用网络与 Internet 的***Ipsec是一个协议集合…

vue-axios下载文件流blob,ie下载报传递给系统调用的数据区域太小.ie文件流下载报错;文件下载失败将blob的错误信息转换成json格式

本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法;如果是多个下载,可以采用数组for循环 情景描述: 1.如果符合导出条件, 后端直接返回数据流,如下图所示…

前端开发框架对比

From: https://www.cnblogs.com/xtdxs/p/6540933.html 本文选取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 个国内外前端开发框架进行初步的横向比较,可…

持续集成工具FinalBuilder使用心得

FinalBuilder 使用这款自动化创建和发布管理工具,软件开发者可以定义和维护一个可靠的以及可重复创建的程序。FinalBuilder包括集成的带有版本的控制系统,文件和目录选项,重复器,源代码编译,测试工具,数据库…

yarn安装依赖包报错 error An unexpected error occurred: “https://registry.npm.taobao.orgnpm/element-ui: get

yarn安装依赖包报错,error An unexpected error occurred: “https://registry.npm.taobao.orgnpm/element-ui: getaddrinfo ENOTFOUND registry.npm.taobao.orgnpm registry.npm.taobao.orgnpm:443”. 这是因为网络不好导致的下载依赖包请求超时报错,…

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)

From: https://blog.csdn.net/u012907049/article/details/72764151 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越…

解决微信小程序报[ app.json 文件内容错误] app.json: app.json 未找到,未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。小程序app.json报错

编译报错:[ app.json 文件内容错误] app.json: app.json 未找到 原因:由于project.config.json文件的miniprogramRoot小程序根目录属性找不到aap.json的路径(可能是错误的路径,也可能是没有这一行代码); &…

css3新单位vw、vh、vmin、vmax的使用详解(附样例)

From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1,vw…

数据结构之递归

第一篇:数据结构之链表 第二篇:数据结构之栈和队列 第三篇:数据结构之二叉树 第四篇:数据结构之排序 第五篇:数据结构之字符串 在这篇文章里,我们主要讨论和递归相关的话题。递归是数据结构中解决复杂问题时…

HBuilderX搭建微信小程序;HBuilderX开发uni-app微信小程序;uni-app开发微信小程序;使用uni-app搭建微信小程序;使用uni-ui模板搭建微信小程序步骤

1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆 4.项目打包 打包后运行在微信小程序工具 才…

vh,vw单位你知道多少?

From: https://mp.weixin.qq.com/s/G7ZYCiO__4g2LjRuNl32Ew 响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小。 比如: (function (doc, win) { let docEl doc.documentElement let resizeEvt…

为什么说任何基于比较的算法将 5 个元素排序都需要 7 次?

排序算法对结果的唯一要求就是操作数满足全序关系: 如果 a≤b 并且 b≤c 那么 a≤c(传递性)。 对于 a 或 b,要不 a≤b,要不 b≤a(完全性)。这个问题可以用信息论来回答。 我从 1 到 5 中挑一个数…

iTerm2分屏时,如何使得新窗口的当前路径和前一个窗口一样?

From: https://segmentfault.com/q/1010000005355758 Preferences 里面设置 Working Directory 为 reuse previous sessions directory

全国80几所重点大学ftp资源库(经常逛逛可能有惊喜哦)很难收集的,知道其他的友友可以留言完善...

2019独角兽企业重金招聘Python工程师标准>>> 重庆交通大学外国语学院ftp \\202.202.240.93/ 密码:a 帐号:as 电子科技大学ftp    ftp://xsc. cuit. edu. cn/   大连理工大学    ftp://ftp. dlut. edu. cn   上海交通大学    ftp://mssite. sjtu. …