精华内容
下载资源
问答
  • 要求通过地址获取文件流 但是我这边需要在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')
            })
          },

     

    展开全文
  • 背景:碰到了在当前页面预览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);

    });

    });

    },

    总结:其实但看代码还是蛮简单的。但是实际操作的时候,还是费了一番功夫。

    展开全文
  • 在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页面附件、图片下载及打开(实现方法)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 解压后放在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文件...
  • 除了常用的菜单和工具栏方法外,还可以通过拖放操作打开文件。 点按J,K,L以控制播放速度和方向。反复点按J或L以加快速度。 点按I或O设置入点和出点。 按向左或向右光标键逐帧步进。 向上或向下按页面一次一次。 按...
  • 循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个的广告条 只需后台修改广告即可更新广告;可设置广告过期时间,通用于站内...
  • JIRA 从入门到精通.doc

    千次下载 热门讨论 2011-10-20 13:22:17
    这样就建立了一个的工作设置,这样在新建项目的时候就可以通过这个设置将我们自己定义的工作与项目联系到一起了。 如果想要讲图中的inactive 状态变成active,必须将设置与项目关联起来就可以。 五、 Issue ...
  • 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的...
  • 这个扩展允许您在IBM连接中搜索和...V3.5:-现在可以显示活动流预览弹出窗口(默认情况下在选项页面中处于启用状态,并且需要通知权限,因此,如果您升级应用程序,它将被chrome禁用,直到您接受的权限)-小错误修复
  • 接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例...
  • 接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例...
  • 接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效网站开发缓存技术、文件I/O处理和图形图像与多媒体方面更高层次地讲解了ASP.NET网站开发技术。本卷共分6篇23章内容,共计600个实例...
  • 警告:如果您的页面以小窗口/小分辨率打开,则此插件无法正常工作 - 对于高级用户,如果您不给它空间,可能会失真。 发行说明: 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等格式的文件,但是请注意这些文件格式可能会在的浏览器窗口中打开显示,...
  • QuickSearch插件使您可以在IBM Connections中快速搜索用户或内容,上载和/或与多个用户共享文件,邀请一组用户加入社区,向您的董事会或某人的董事会共享URL,实时查看您的活动更新以及使用网络摄像头或现有图片...
  • "_blank"在新页面打开。 streamscript (url):设置这个参数为了兼容‘伪媒体’FLV文件。 type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): 播放器会根据文件名的最后三个字符来判断类型。在你使用服务器端...
  • C#开发典型模块大全

    2014-03-12 18:11:22
    11.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:13
    16.12 打开文件的对话框 16.13 保存文件的对话框 第十七章 画刷和画笔 17.1 填充实心颜色 17.2 阴影画刷 17.3 绘制原点 17.4 纹理画刷 17.5 线性渐变画刷 17.6 路径渐变画刷 17.7 排列画刷 ...
  • 您还可以打开,编辑和输出 PDF/X 文件,设置叠印控件以及为准备就绪输出添加出血,修剪和裁剪标记。 还有更多… 以下是这款令人难以置信的应用程序内置的其他一些功能… 即时撤消历史记录 使用历史记录滑块即时...
  • Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设...
  • xheditor-1.1.14

    2012-08-07 09:25:30
    特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。 我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数...
  • vc++ 开发实例源码包

    2014-12-16 11:25:17
    19:下载流文件(rm,Media Player). Notepad++ V5.6.8 源码! 如题。 OA精灵代码 c++版 一套oa系统。 ocxdlgtest dll的一个实例。 OD反汇编引擎(带VC修改版和原版) 如题。主要文件就4个,非常适合学习,详细见源码...
  •  Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设...
  • Jxcms目前只有一个文章模型,但已有的功能模块都努力做到精益求精,追求完美,Jxcms的模板对于用户非常友好,打开模板文件就能看到完美的模板界面(非独立模板需要把head和foot还原到相应的文件中),非常适合于建设...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

文件流打开新页面预览