前言：

在我们项目中，下载png,jpg的文件是非常方便的，动态生成一个a标签，给他赋值路径，动态点击，就可以实现这个功能，但是pdf，word等类型的文件是不行的，因为浏览器不允许我们直接点击下载，是点击预览，我们在这里分享下各自的方法。

***在说具体方法之前，先解决一个问题，就是使用下面的方法：点击下载pdf却是打开预览的问题（mock.js，如果页面中使用了mock.js一定会出现这个问题，因为我们的打开页面请求被拦截了，解决办法，把页面引入的mock去掉），下面是我项目中引入的mock,必须注释才能解决这个问题

方法一：pdf

方法二：pdf,xlsx等各种格式

一、下载png,jpg等常见问题的方法

方法一:（ jpg png等）

const link = document.createElement('a')link.style.display = 'none'link.href = url  //（放你的路径）document.body.appendChild(link)link.click()document.body.removeChild(link)

方法二：（word(docx) excel(xlsx) ppt jpg png等）

/***下载或导出文件* @param blob  ：返回数据的blob对象* @param tagFileName  ：下载后文件名标记* @param fileType  ：文件类 word(docx) excel(xlsx) ppt等*/
const saveFileToBlob = (blob, tagFileName, fileType) => {// if (fileType) {//   console.warn('未传入文件类型,例如文件类 word(docx) excel(xlsx) ppt jpg png等')// }// if (isBlob(blob)) {var downloadElement = document.createElement('a')let href = window.URL.createObjectURL(blob) //创建下载的链接downloadElement.href = hrefdownloadElement.download = tagFileName + '.' + fileType //下载后文件名document.body.appendChild(downloadElement)downloadElement.click() //点击下载document.body.removeChild(downloadElement) //下载完成移除元素window.URL.revokeObjectURL(href) //释放掉blob对象// } else {//   console.warn('不是blob对象类型的参数,可选择saveFileToBase64(Base64对象,文件类型)或saveFileToLink(文件链接,文件名,文件类型,进度回调方法)')// }
}

二、下载pdf的方法（）

***在说具体方法之前，先解决一个问题，就是使用下面的方法：点击下载pdf却是打开预览的问题（mock.js，如果页面中使用了mock.js一定会出现这个问题，因为我们的打开页面请求被拦截了，解决办法，把页面引入的mock去掉），下面是我项目中引入的mock,必须注释才能解决这个问题

方法一：pdf

调用：
let  src = '你的pdf路径'
downloadFile(src,'333')//地址，你的文件名

    /*** 下载文件，支持pdf,word等格式* */const downloadFile = (data, fileName ) => {if (!data) {return;}let url = window.URL.createObjectURL(new Blob([data]));let link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', fileName + '.pdf');document.body.appendChild(link);link.click();}

方法二：pdf,xlsx等各种格式

//调用
saveFileToLink(url,'555','pdf') //地址，文件名，文件类型

    /*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题* @param url  ：文件链接* @param fileName  ：文件名;* @param type  ：文件类型;* @param fn  ：进度回调方法;*/const saveFileToLink = (url, fileName, type, fn) => {if (!CheckUrl(url)) {throw new Error('传入参数不合法,不是标准的文件链接')} else {var xhr = new XMLHttpRequest()// url = url.includes('https:') ? url.replace('https:', '') : url.replace('http:', '')//资源路径动态获取请求的方式HTTPS或HTTP// console.log(url)xhr.open('get', url, true)xhr.setRequestHeader('Content-Type', `application/${type}`)xhr.setRequestHeader('If-Modified-Since', '0') //解决缓存问题,每次请求都去请求服务器获取最新数据xhr.responseType = 'blob'xhr.onprogress = function(e) { //文件下载进度if (fn && typeof fn === 'function') {fn(e)//监听文件下载进度;}},xhr.onload = function() {if (this.status == 200) {//接受二进制文件流var blob = this.responsesaveFileToBlob(blob, fileName, type)}},xhr.send()}}

    /***下载或导出文件* @param blob  ：返回数据的blob对象* @param tagFileName  ：下载后文件名标记* @param fileType  ：文件类 word(docx) excel(xlsx) ppt等*/const saveFileToBlob = (blob, tagFileName, fileType) => {// if (fileType) {//   console.warn('未传入文件类型,例如文件类 word(docx) excel(xlsx) ppt jpg png等')// }// if (isBlob(blob)) {var downloadElement = document.createElement('a')let href = window.URL.createObjectURL(blob) //创建下载的链接downloadElement.href = hrefdownloadElement.download = tagFileName + '.' + fileType //下载后文件名document.body.appendChild(downloadElement)downloadElement.click() //点击下载document.body.removeChild(downloadElement) //下载完成移除元素window.URL.revokeObjectURL(href) //释放掉blob对象// } else {//   console.warn('不是blob对象类型的参数,可选择saveFileToBase64(Base64对象,文件类型)或saveFileToLink(文件链接,文件名,文件类型,进度回调方法)')// }}

    /*** 校验是否url链接* @param url  ：url链接* @returns {Bool}：是否url链接*/const CheckUrl = (url) => {let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/return reg.test(url)}

到这里就结束了！

vue和js点击下载pdf,word,png,jpg等格式的文件，解决点击下载pdf却是打开预览的问题相关推荐

微信小程序下载word，excel，doc，pdf并打开预览并可以转发收藏
//查看并下载 contract() {wx.downloadFile({//下载url: url,//服务器上面的地址filePath: wx.env.USER_DATA_PATH + '/test ...
IOS 打开预览pdf、ppt、excel、word、tet、rtf、csv格式的文件，微信文件分享
前言:打开预览pdf.ppt.excel.word.tet.rtf.csv格式的文件有两种一方,一种是利用 UIWebView或者WKWebView 来直接打开,另一种就是利用 QLPreviewCo ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
微信小程序打开预览下载的文件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用 wx.openDocument(obj) 方法预览 wx.downloadFile({url: 'htt ...
怎么用JS端实现图片、视频时直接下载而不是打开预览
项目中的附件列表,通常情况都需要提供下载.删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.hre ...
chrome浏览器在线打开预览pdf文件，而不是下载文件。
Content-Type: application/pdf Content-Disposition: inline; filename="pdf-file1.pdf" 关键有2个点 ...
iOS 关于下载word/png/excel附件并打开预览
需求:下载过的文件列表显示已下载,可以直接点击预览,如果没下载就提示它去下载首先下载文件并预览这一过程,需要由下载文件路径,存储路径,预览文件三个步骤来完成. 不多说,直接上代码: #pragma ...
前端预览word文件_[装机必备] QuickLook —— 敲击空格即可快速预览文件
今天给大家推荐的软件是:QuickLook 你只需要选中文件,然后敲击空格,就可以快速预览文件内容 QuickLook 有三个版本:安装版.便携版.UWP 版作者对这三个版本的描述: *需要注意的 ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
什么是PDF（便携式文档格式）文件以及如何打开PDF？
PDF is a popular file extension that is generally used to store documents, brochures, books, scanned ...

vue和js点击下载pdf,word,png,jpg等格式的文件，解决点击下载pdf却是打开预览的问题

前言：

目录：

一、下载png,jpg等常见问题的方法

方法一:（ jpg png等）

方法二：（word(docx) excel(xlsx) ppt jpg png等）

二、下载pdf的方法（）

方法一：pdf

方法二：pdf,xlsx等各种格式

到这里就结束了！

vue和js点击下载pdf,word,png,jpg等格式的文件，解决点击下载pdf却是打开预览的问题相关推荐

最新文章

热门文章