一、问题

用户要求pdf文件浏览器直接下载，虽然浏览器直接打开预览时会有下载功能，但是用户就是这么奇葩（狗头保命）。

一开始想到直接拿到pdf的url地址然后使用window.location.href打开即可解决，但是这个还是会在浏览器打开预览（草率了）。

最后百度查到使用如下js代码实现；

function dowanloadpdf(pdfurl) {axios({method: 'get',url: pdfurl,responseType: 'blob',}).then(function (response) {const link = document.createElement('a')let blob = new Blob([response.data], {type: response.data.type})let url = URL.createObjectURL(blob)link.href = urllink.download = '下载文件.pdf'link.click()})}

这个方式如果pdf是本地或同源的话是没问题的，但是正式环境由于pdf地址和网站地址不一致，就产生了跨域问题。

二解决

瞬间心塞。又是一通百度，网上各种说加什么请求头的，但是均未解决，此时想到曾经一个功能也有同样问题，是通过后台流处理进行解决。那么剩下的就简单了。

链接如下：

pdf.js+turn.js实现Web翻页阅读pdf文件（工作记录）_叩叮ING的博客-CSDN博客

以上链接里有后台流处理方法。

拿到流以后，通过js控制a标签进行文件下载，完整js代码

function convertPdf(){var array ="";$.ajax({type:"POST",async:false, // false是不采用异步的方式data:{"pdf_url":pdfurl},mimeType:'text/pdf;charset=x-user-defined',url:"${rootpath}/special/convertPdf2.jspx",success:function (data,textStatus, jqXHR) {//data返回的文件流var rawLength = data.length;array = new Uint8Array(new ArrayBuffer(rawLength));for(var i = 0;i<rawLength;i++){array[i] = data.charCodeAt(i)&0xff; //转二进制流}                 const link = document.createElement('a')let blob = new Blob([array], {type:'application/pdf'})               let url = URL.createObjectURL(blob)link.href = urllink.download = '下载文件.pdf'link.click()},});       }

问题解决，潇洒转身。

三补充

如果要支持ie和谷歌两个内核的话，用如下方法

//选择浏览器function downFile(blob, fileName) {//blob就是一中返回的文件,fileName是下载文件名if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlob方法返回bool值navigator.msSaveBlob(blob, fileName);//本地保存} else {var link = document.createElement('a');//a标签下载link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);}}

参考链接：

我现在有一串文件流（pdf）获取到了，现在想用js下载pdf格式的文件，请问应该怎么做？ - 知乎

实现pdf浏览器下载（非预览）相关推荐

charm浏览器下载网页预览PDF文件
进入网页开发者页面,寻找可直接下载的PDF源文件 (简单有效.无限制) 1.浏览器打开网页(建议用谷歌浏览器打开): 2.点击鼠标右键,选择[检查] ,或者按Crtl+shift+I快捷键: 3.进入 ...
uniapp实现pdf地址下载和预览
需求首先,先请求后端接口,拿到pdf下载地址(若有跨越问题,请后端解决),通过uni.downloadFile下载pdf模板,再使用uni.openDocument新开页面打开文档进行预览(需装有可 ...
浏览器点击pdf的链接——实现下载或预览功能——基础积累
最近在做后台管理系统时,遇到了一个需求,就是点击pdf链接时,需要实现文档的下载. 点击链接,通常就会用到a标签,将链接放在href参数中,点击时就会触发相应的事件了. 常规写法如下: <a : ...
下载、预览PDF报错问题排查
PC端解决方案 // 检查请求的请求头类型 // 后端检查接口返回类型'content-type': 'application/json' 移动端解决方案先检查请求头类型,如果是使用的uniapp, ...
vue pdf下载及预览（移动端）
本文使用的是 vue-pdf,其实还有其他的很多比如pdf.js,只不过觉得这个和vue结合了应该不用下载一堆东西,直接npm install就可以,所以采用vue-pdf来撰写pdf下载及预览. 无 ...
安卓手机实现无需下载即可预览pdf文件
1.从pdf.js官网中下载实例,里面可以把相关的文件放在oss或者web服务上,但是要修改demo中的html文件(Mac打不开该实例的html文件,打开是个空白,window可以,原因未知,不影响 ...
a标签下载文件，浏览器变打开预览的解决方案
前景: 处理接口返回的文件链接需要下载,例如http://xxxxx/xxx.jpeg,使用a标签进行下载时(加了download),浏览器对这些类型的文件可以解析,还会打开这个文件在浏览器上进行预览 ...
微信小程序saveFile，openDocument方法下载、预览pdf文件不能用本地应用打开（不能另存为）的问题
微信小程序saveFile,openDocument方法下载.预览pdf文件不能用本地应用打开(不能另存为)的问题查看官方文档的openDocument()方法,发现加一个showMenu: tru ...
base64格式(pdf/word/ppt等)文件的下载与预览
后端返回base64格式的文件数据,前端根据接收的数据进行转换后实现对文件的下载和预览方法: // 附件下载这里的的data就是content数据 const downloadAttach = (i ...

实现pdf浏览器下载（非预览）

一、问题

二解决

三补充

实现pdf浏览器下载（非预览）相关推荐

最新文章

热门文章

实现pdf浏览器下载（非预览）

一、问题

二 解决

三 补充

实现pdf浏览器下载（非预览）相关推荐

最新文章

热门文章

二解决

三补充