项目中常用到的前端vue根据后端接口返回文件地址实现在线预览和下载功能 |
您所在的位置：网站首页 › word预览功能在哪里 › 项目中常用到的前端vue根据后端接口返回文件地址实现在线预览和下载功能 |
|
简简单单的记录一下项目中做过的东西 项目中时常会有要求查看附件，附件的下载的要求，在这里简单记录一下前端vue根据后端接口返回文件地址实现在线预览和下载功能。 👀文件在线预览目前我这里使用的是点击a链接跳转页面的做法，这个方法适用于gif，png，jpeg，jpg，mp4，pdf，mp3格式文件的在线预览，对于excel，word，zip，pptx他会自动下载到本地，可以下载后查看，主要功能代码如下： preview(row){ // row="https://xxxxxxx.pdf" var myHref = document.createElement('a') myHref.href = row.href myHref.target = "_blank" myHref.click() } 📁文件下载功能这里记录的文件下载也是直接后端返回文件地址，然后下载，这个方法目前我自己测试能够支持有gif，png，jpeg，jpg，mp4，pdf，mp3，excel，word，zip，pptx，txt，mov文件格式。主要功能代码如下： /** * @description: 下载 * @return {*} */ handleDownload(row) { let url = this.baseUrl + row.fileUrl; this.fileLinkToStreamDownload(url, row); }, fileLinkToStreamDownload(url, row) { let fileName = row.fileName; let xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.setRequestHeader( "Content-Type", `application/pdf`, `application/msword`, `image/png`, `image/jpeg`, `image/gif`, `text/plain`, `application/octet-stream`, `text/xml` ); xhr.responseType = "blob"; let that = this; xhr.onload = function () { if (this.status == 200) { //接受二进制文件流 var blob = this.response; that.downloadExportFile(blob, fileName); } }; xhr.send(); }, downloadExportFile(blob, tagFileName) { let downloadElement = document.createElement("a"); let href = blob; if (typeof blob == "string") { downloadElement.target = "_blank"; } else { href = window.URL.createObjectURL(blob); //创建下载的链接 } downloadElement.href = href; //下载后文件名 downloadElement.download = tagFileName; downloadElement.click(); //点击下载 if (document.body.downloadElement) { document.body.removeChild(downloadElement); //下载完成移除元素 } if (typeof blob != "string") { window.URL.revokeObjectURL(href); //释放掉blob对象 } },上面这个文件下载还有可能能够支持其他格式，这个就需要大家自己一个一个去测试了。 简单记录一下，以防下次找不到！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |