-
实现文件打开新页面预览
2021-01-20 11:25:13要求通过地址获取文件流 但是我这边需要在header中带token 所以 直接访问window.open(url)地址报没有权限 所以通过访问接口地址返回文件流通过流文件创建文件对象展示在新的窗口。 handlePreview (file) { ...要求通过地址获取文件流 但是我这边需要在header中带token 所以 直接访问window.open(url)地址报没有权限
所以通过访问接口地址返回文件流通过流文件创建文件对象展示在新的窗口。
handlePreview (file) { const _this = this _this.$http({ url: _this.$http.adornUrl('file/' + file.url), method: 'get', responseType: 'blob', }).then(({ data }) => { window.open(window.URL.createObjectURL(data), '_blank') }) },
-
vue 后台返回的文件流进行预览_vue-pdf预览和下载,后台返回文件流(blob)
2021-02-05 00:03:44背景:碰到了在当前页面预览pdf(不打开新的窗口,采用iframe),并下载。一、pdf的预览1.在适合位置嵌入iframe标签2.在methods中添加相应方法pdfPreview(val) {this.previewDownFile(val).then(v => {if (v.status...背景:碰到了在当前页面预览pdf(不打开新的窗口,采用iframe),并下载。
一、pdf的预览
1.在适合位置嵌入iframe标签
2.在methods中添加相应方法
pdfPreview(val) {
this.previewDownFile(val).then(v => {
if (v.status == 200) {
const binaryData = [];
binaryData.push(v.data);
let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
this.pdfUrl = url
} else {
this.$message.error("请求错误!");
}
})
},
previewDownFile(val) {
return new Promise((resolve, reject) => {
this.$axios({
url: `file-server/download/annex/${val.value}`,
timeout: 0,
method: 'get',
responseType: 'blob',
header: {"Content-Type": "multipart/form-data"},
}).then(res => {
resolve(res)
}).catch(() => {
resolve(false);
});
});
},
二、pdf的下载
pdfUpdate() {
this.previewDown().then(v => {
if (v.status == 200) {
if (!v) {
return;
} else {
const elink = document.createElement("a");
// console.log(new Blob([v.data]));
elink.href = window.URL.createObjectURL(new Blob([v.data], {type: `application/pdf`}));
elink.style.display = 'none';
elink.setAttribute('download', this.tabData.dataCateName);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}
})
},
previewDown() {
return new Promise((resolve, reject) => {
this.$axios({
url: `file-server/download/${this.emitData.fileId}`,
timeout: 0,
method: 'get',
responseType: 'blob',
header: {"Content-Type": "multipart/form-data"},
}).then(res => {
resolve(res)
}).catch(() => {
resolve(false);
});
});
},
总结:其实但看代码还是蛮简单的。但是实际操作的时候,还是费了一番功夫。
-
java web 下载文件在新窗口打开_javaweb页面附件、图片下载及打开(实现方法)
2021-02-26 21:41:59在javaweb中写了一个图片的链接,可以打开预览...预览关键在于如何在页面上下载这个张图片,于是写了下面的一个jsp用流来读取文件;下载pageEncoding="utf-8"%>String path = request.getContextPath();String ba...在javaweb中写了一个图片的链接,可以打开预览,另外提供一个下载功能。
以下是预览代码,没什么好说的;href若连接的是一个压缩包文件之类无法直接打开的就可以直接下载;
关键在于如何在页面上下载这个张图片,于是写了下面的一个jsp用流来读取文件;
pageEncoding="utf-8"%>
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String classPath = (String.valueOf(Thread.currentThread().getContextClassLoader().getResource(""))).replaceAll("file:/", "").replaceAll("%20", " ").trim();
%>
//得到文件名字和路径
String filepath = request.getParameter("path");
String filename = request.getParameter("pdfName");
//设置响应头和下载保存的文件名
response.setContentType("APPLICATION/OCTET-STREAM");
response.setHeader("Content-Disposition", "attachment; filename=\"" + filename + "\"");
//打开指定文件的流信息
OutputStream outputStream = response.getOutputStream();
InputStream inputStream = new FileInputStream(filepath+filename);
byte[] buffer = new byte[1024];
int i = -1;
while ((i = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, i);
}
outputStream.flush();
outputStream.close();
inputStream.close();
outputStream = null;
out.clear();
out = pageContext.pushBody();
%>
最后查资料发现在HTML5中提供了download属性,只要写了这个属性可以直接下载图片而不是直接打开;可惜只支持h5,不然省事多了
download中为下载文件的文件名。
以上这篇javaweb页面附件、图片下载及打开(实现方法)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
-
pdfjs预览 vue中常见的坑及修改预览的标题名
2021-03-19 10:03:23解压后放在vue项目 public下面 使用: 1.文件流预览 ...//filename等于文件名 data指代后端返回的文件流 ...//该函数可以下载各种类型的文件 如果是pdf格式的 使用pdfjs进行打开新页面预览 export const downloa..pdfjs下载地址:http://mozilla.github.io/pdf.js/getting_started/#download
解压后放在vue项目 public下面
使用:
1.文件流预览
import { Message} from "element-ui"; //filename等于文件名 data指代后端返回的文件流 不是文件地址 //该函数可以下载各种类型的文件 如果是pdf格式的 使用pdfjs进行打开新页面预览 export const downloadFile = (filename, data) => { filename = decodeURI(filename); let type = filename.substring(filename.lastIndexOf(".") + 1); let blob = new Blob([data]); let url = window.URL.createObjectURL(blob); //如果是pdf的 直接打开 if (type === "pdf") { let path = `${ window.location.origin }/pdfjs/web/viewer.html?file=${encodeURIComponent( url )}&filename=${encodeURIComponent(filename)}`; //注意参数 filename是额外处理的 pdfjs加载文件流的形式 如果使用blob转化的地址 文件名获取不到 需额外传参数 在pdfjs里面处理document.title var tempwindow = window.open("_blank"); tempwindow.location = path; return; } //IE处理下载 if (window.navigator.msSaveBlob) { try { console.log("ie"); window.navigator.msSaveBlob(blob, filename); } catch (e) { Message({ type: "error", message: "浏览器暂不支持下载", duration: 4000 }); console.log(e); } } else { var a = document.createElement("a"); if (!a.click) { Message({ type: "error", message: "浏览器暂不支持下载", duration: 4000 }); throw new Error('DownloadManager: "a.click()" is not supported.'); } a.href = url; a.target = "_parent"; if ("download" in a) { a.download = filename; } (document.body || document.documentElement).appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url); } };
2.绝对路径地址预览 需满足 当前地址在浏览器可正常预览较为方便
let path = `${ window.location.origin }/pdfjs/web/viewer.html?file=${encodeURIComponent( url )}&filename=${encodeURIComponent(filename)}`; //注意参数 filename是额外处理的 pdfjs加载文件流的形式 如果使用blob转化的地址 文件名获取不到 需额外传参数 在pdfjs里面处理document.title var tempwindow = window.open("_blank"); tempwindow.location = path;
pdfjs 源码修改跨域和document.title
1.跨域 viewer.js注释2323行
2.修改title viewer.js getPDFFileNameFromURL函数修改 增加获取地址栏filename函数
代码:
//获取地址栏参数 function getQueryParams(key){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == key){ return pair[1]; } } return(false); } function getPDFFileNameFromURL(url) { // var defaultFilename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "document.pdf"; //从地址栏获取filename return decodeURIComponent(getQueryParams('filename'))|| 'document.pdf' if (typeof url !== "string") { return defaultFilename; } if (isDataSchema(url)) { console.warn("getPDFFileNameFromURL: " + 'ignoring "data:" URL for performance reasons.'); return defaultFilename; } var reURI = /^(?:(?:[^:]+:)?\/\/[^\/]+)?([^?#]*)(\?[^#]*)?(#.*)?$/; var reFilename = /[^\/?#=]+\.pdf\b(?!.*\.pdf\b)/i; var splitURI = reURI.exec(url); var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]); if (suggestedFilename) { suggestedFilename = suggestedFilename[0]; if (suggestedFilename.includes("%")) { try { suggestedFilename = reFilename.exec(decodeURIComponent(suggestedFilename))[0]; } catch (ex) {} } } return suggestedFilename || defaultFilename; }
如果是npm下载的pdfjs-dist 可能会出现未知bug 试过没成功 静态文件比较方便不考虑项目大小的话
-
PDG文件批量转换PDF
2011-03-24 14:55:37再点击“选择存放转换出来的图象文件的文件夹”下一行右边的那个打开文件夹图标单击后,注意:这里最好选一个新的空白文件夹,为什么要用一个新的文件夹?因为这样会比较方便你管理,要是你突然想把图片和PDG文件... -
【最新版】shotcut-macos-signed-200412.dmg【亲测可用】最好的跨平台视频编辑器
2020-04-24 20:24:11除了常用的菜单和工具栏方法外,还可以通过拖放操作打开文件。 点按J,K,L以控制播放速度和方向。反复点按J或L以加快速度。 点按I或O设置入点和出点。 按向左或向右光标键逐帧步进。 向上或向下按页面一次一次。 按... -
最好的asp CMS系统科讯CMSV7.0全功能SQL商业版,KesionCMS V7.0最新商业全能版-免费下载
2013-03-09 22:57:22循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个新的广告条 只需后台修改广告即可更新广告;可设置广告过期时间,通用于站内... -
-
JIRA 从入门到精通.doc
2011-10-20 13:22:17这样就建立了一个新的工作流设置,这样在新建项目的时候就可以通过这个设置将我们自己定义的工作流与项目联系到一起了。 如果想要讲图中的inactive 状态变成active,必须将设置与项目关联起来就可以。 五、 Issue ... -
程序天下:JavaScript实例自学手册
2018-07-08 12:59:5512.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的... -
QuickSearch IBM连接「QuickSearch for IBM Connections」-crx插件
2021-03-08 16:50:04这个扩展允许您在IBM连接中搜索和...V3.5:-现在可以显示活动流预览弹出窗口(默认情况下在选项页面中处于启用状态,并且需要通知权限,因此,如果您升级应用程序,它将被chrome禁用,直到您接受新的权限)-小错误修复 -
-
ASP.NET开发实战1200例(第1卷).part2
2016-06-11 20:12:37接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例... -
ASP.NET开发实战1200例(第1卷).part1
2016-06-11 20:07:19接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例... -
ASP.NET开发实战1200例(第1卷).part3
2016-06-11 20:19:00接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例... -
答案HQ Carbonic Edition 2「Answers HQ Carbonic Edition 2」-crx插件
2021-03-15 16:38:03警告:如果您的页面以小窗口/小分辨率打开,则此插件无法正常工作 - 对于高级用户,如果您不给它空间,可能会失真。 发行说明: v.2.4.0 - 固定的按钮对齐,因为最新的AHQ更新打破了它(由于愚蠢的AHQ内联CSS,报告... -
-
Imagevue 2.8.10.2.zip
2019-05-23 15:39:47而且还支持一些其他富媒体文件格式,比如除支持JPG, PNG, GIF外还支持 SWF格式的flash动画 和FLV格式的视频文件,还支持DOC, PDF, HTML, QT等格式的文件,但是请注意这些文件格式可能会在新的浏览器窗口中打开显示,... -
快速搜索IBM连接云。「QuickSearch for IBM Connections Cloud」-crx插件
2021-03-08 18:10:53QuickSearch插件使您可以在IBM Connections中快速搜索用户或内容,上载和/或与多个用户共享文件,邀请一组用户加入社区,向您的董事会或某人的董事会共享URL,实时查看您的活动流更新以及使用网络摄像头或现有图片... -
JW FLV PLAYER 在线FLV播放器中文使用说明
2011-03-22 11:22:02"_blank"在新页面中打开。 streamscript (url):设置这个参数为了兼容‘伪流媒体’FLV文件。 type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): 播放器会根据文件名的最后三个字符来判断类型。在你使用服务器端... -
C#开发典型模块大全
2014-03-12 18:11:2211.2.1 文件流技术 256 11.2.2 文件解压缩技术 258 11.2.3 获取系统文件及文件夹图标 262 11.2.4 获取指定目录下的所有文件及文件夹 265 11.2.5 Word操作技术 266 11.2.6 进度条的显示 266 11.2.7 对... -
× 首页搜索后转入新页面,首页vue.js; × 读取文件属性——完成时间,作为月度统计依据,或提供选择,以上传时间为统计口径,生成某个目录下月度成果报表,与上个月对比柱状图; × 项目目录编辑完善:ztree目录...
-
C#全能速查宝典
2014-04-26 16:16:27《C#全能速查宝典》共分为8章,分别介绍了C#语言基础、Windows窗体及常用控件、Windows高级控件、控件公共属性、方法及事件、数据库开发、文件、数据流与注册表、GDI+绘图技术和C#高级编程,共包含562个C#编程中常用... -
Microsoft C# Windows程序设计(上下册)
2011-08-05 10:28:1316.12 打开文件的对话框 16.13 保存文件的对话框 第十七章 画刷和画笔 17.1 填充实心颜色 17.2 阴影画刷 17.3 绘制原点 17.4 纹理画刷 17.5 线性渐变画刷 17.6 路径渐变画刷 17.7 排列画刷 ... -
排版设计印刷工具 Serif Affinity Publisher 1.8.4.648 x64 中文多语版.zip
2021-03-08 08:06:26您还可以打开,编辑和输出 PDF/X 文件,设置叠印控件以及为准备就绪输出添加出血,修剪和裁剪标记。 还有更多… 以下是这款令人难以置信的应用程序内置的其他一些功能… 即时撤消历史记录 使用历史记录滑块即时... -
精迅CMS内容管理系统 v1.0GBK源代码
2021-03-23 05:07:19Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设... -
xheditor-1.1.14
2012-08-07 09:25:30特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。 我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数... -
vc++ 开发实例源码包
2014-12-16 11:25:1719:下载流文件(rm,Media Player). Notepad++ V5.6.8 源码! 如题。 OA精灵代码 c++版 一套oa系统。 ocxdlgtest dll的一个实例。 OD反汇编引擎(带VC修改版和原版) 如题。主要文件就4个,非常适合学习,详细见源码... -
精迅CMS v1.0 GBK PHP MYSQL 开源版.rar
2019-07-10 03:45:08Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设... -
精迅CMS v2.1 正式版 GBK.rar
2019-08-30 04:20:21Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设...