精华内容
下载资源
问答
  • 所以通过访问接口地址返回文件流通过流文件创建文件对象展示在的窗口。 handlePreview (file) { const _this = this _this.$http({ url: _this.$http.adornUrl('file/' + file.url), method:.

    要求通过地址获取文件流 但是我这边需要在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.js文件新窗口预览base64进制

    千次阅读 2019-11-05 17:28:24
    条件:1、后台返回是...1、预览按钮click===获取base64文件流存入缓存。注意太大了超过存储了,最好做下类似这样的处理。 2、viewer.html文件的viewer.js前面引入这样的处理,并配置全局公共变量。进行转成pdf识...

    条件:1、后台返回是base64文件流

               2、兼容ie浏览器打开

               3、存放于vue工程里面

     

    直接跳过花言巧语,切入主题来实现:

    1、预览按钮click===获取base64文件流存入缓存。注意太大了超过存储了,最好做下类似这样的处理。

    2、viewer.html文件的viewer.js前面引入这样的处理,并配置全局公共变量。进行转成pdf识别的进制数。

    3、配置全局,放弃局部变量

    4、针对viewer.js进行局部配置。来兼容ie浏览器(replace不识别。是file当做文件对象而不是字符串url字符串)。从而配置下面即可: IE关键是这个

    展开全文
  • 打开pdf文件,找到viewer.js,搜索 var DEFAULT_URL 把内容置空,即 var DEFAULT_URL = ‘’; 使用: window.open(’/static/pdf/web/viewer.html?file=’ + window.URL.createObjectURL(blob)) xhr.onload = ...
    直接下载
    var url = this.GLOBAL_URL + "/api/GetFile?id=" + id;		// 请求的url + id
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true)
    xhr.responseType = "blob";
    xhr.setRequestHeader("client_type", "DESKTOP_WEB");
    xhr.setRequestHeader("Authorization", token);			// 自定义请求头
    xhr.onload = function(){
    	if(this.status == 200){
    		var blob = this.response;
    		var fileName = filename;
    		if(window.navigator.msSaveOrOpenBlob){			// IE浏览器下
    			navigator.msSaveBlob(blob, fileName);
    		} else {
    			var  link = document.createElement("a");
    			link.href = window.URL.createObjectURL(blob);
    			link.download = fileName;
    			link.click();
    			window.URL.revokeObjectURL(link.href);
    		}
    	}
    };
    xhr.send()
    
    在线预览

    在线预览我们需要借助pdf.js,下载地址:https://github.com/wwjhzc/pdf
    在这里插入图片描述
    打开pdf文件,找到viewer.js,搜索 var DEFAULT_URL 把内容置空,即 var DEFAULT_URL = ‘’;
    使用: window.open(’/static/pdf/web/viewer.html?file=’ + window.URL.createObjectURL(blob))

    xhr.onload = function(){
    	if(this.status == 200){
    		var blob = this.response;
    		var fileName = filename;
    		window.open('/static/pdf/web/viewer.html?file=' + window.URL.createObjectURL(blob))
    	}
    };
    
    展开全文
  • vue-pdf 通过文件流,页面预览pdf文件

    千次阅读 2020-07-01 14:38:07
    参考大佬博客 ... <!--预览对话框--> <el-dialog class="pdf" :visible.sync="fileType"> <p class="arrow"> ...

    参考大佬博客

    https://blog.csdn.net/m0_37852904/article/details/95992267?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

     

    <!--预览对话框-->
            <el-dialog class="pdf" :visible.sync="fileType">
                <p class="arrow">
                    <!--上一页-->
                    <span @click="changePdfPage(0)" class="turn addBtn" :class="{grey: currentPage==1}">上一页</span> {{currentPage}} / {{pageCount}}
                    <!--下一页-->
                    <span @click="changePdfPage(1)" class="turn addBtn" :class="{grey: currentPage==pageCount}">下一页</span>
                </p>
                <!--自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
                <!--src需要展示的PDF地址-->
                <!--当前展示的PDF页码 -->
                <!--PDF文件总页码-->
                <!--一开始加载的页面-->
                <!--加载事件--><!-- @page-loaded="currentPage=$event" -->
                <pdf :src="src" :page="currentPage" @num-pages="pageCount=$event"  @loaded="loadPdfHandler">
                </pdf>
            </el-dialog>

    seeMenu(id) {

                 let url = url?id=id;
                    _this.$axios.get(url, {
                        responseType: 'blob',
                        'Content-Type': 'application/pdf'
                    }).then(res => {
                        let content = res.data;
                        let url="";
                        if (window.createObjectURL != undefined) { // basic
                                  url = window.createObjectURL(content);
                                } else if (window.webkitURL != undefined) { // webkit or chrome
                                  try {
                                    url = window.webkitURL.createObjectURL(content);
                                  } catch (error) {
                        
                                  }
                                } else if (window.URL != undefined) { // mozilla(firefox)
                                  try {
                                    url = window.URL.createObjectURL(content);
                                  } catch (error) {
                        
                                  }
                                }
                        this.src=url;
                  
                    })

    }

    展开全文
  • 主要为大家详细介绍了vue实现在线预览pdf文件和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 根据后端返回的文件流进行预览文件 <el-button @click.native.prevent="prewelRow(scope.row)">预览</el-button> //这里调接口 getDataExcel({id:row.id}).then(res=>{ var excelData = res....
  • 来实现预览操作时,文件打开的窗口页面title会根据后台方法名来显示,此时如果不想看到方法名,想让页面title动态显示文件名,需要进行以下操作: /* 设定弹出页面的title 暂不适用pdf格式文件*/ var title1=name...
  • 无需安装任何软件,直接将pdfjs前端文件放到工程下,通过window.open写法直接引用pdfjs预览工具即可打开pdf文件。word文件可自行转为pdf文件后再通过该工具预览
  • web项目PC端和移动端H5,微信小程序在线预览base64格式的pdf文件 本人项目实用实测可行
  • 预览PDF文件(读取文件流方式)

    千次阅读 2018-10-19 14:04:00
    网页标题 } } } FileStream fs = new FileStream(pdfSrc, FileMode.Open, FileAccess.Read); return File(fs, " application/pdf " ); }   转载于:...
  • https://blog.csdn.net/shentibeitaokong/article/details/80011900 ... http://www.rioyi.com/ 项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pd...
  • 实现代码: <iframe :src="'//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc='+pdfUrl" width="100%" height="100%" frameborder="0"> <...可以直接打开
  • 最近参与了个项目,前端框架采用的是vue.js,需求是在项目中做一个pdf在线预览打印等功能,在网上找了很多例子基本上全 都是靠pdf.js实现的,很多例子说的都不清楚,对于我这个vue小白来说话,和天书差不多…几经...
  • 可以在线预览pdf文件

    2019-04-02 17:15:14
    可以在线预览pdf文件,兼容ie 下载后放入tomcat下webapps即可 导入项目后,可以按照需要修改viewer.js和viewer.html文件
  • 本文主要介绍了Asp.net实现直接在浏览器预览Word、Excel、PDF、Txt文件的具体实例。文章篇尾附上源码下载,有兴趣的朋友可以看下
  • 微信小程序预览二进制流文件

    千次阅读 2021-03-03 14:52:59
    微信小程序将后端接口返回的二进制PDF 文件在线预览一、微信小程序的文件系统二、小程序实现文件预览三、实现效果图总结 一、微信小程序的文件系统 微信小程序文件系统参考官方文档:微信小程序文档 我们主要是...
  • 上一篇降到通过file跳转路径,取后台读取pdf文件。 后来我们需要上传pdf文件时支...
  • 这样点击下载 会直接打开pdf预览,需要做的是直接弹出下载框进行下载 主要原因是因为文件的请求头部的问题,需要设置一下头部 可以通过php后端做转发设置一下 改后的前端代码 < a href = " //i.demo....
  • 前端如何实现文件下载,防止浏览器自动打开预览文件欢迎踩坑踩坑记录一**window.open()方法**踩坑记录二**html的a标签**踩坑记录三**window.location.href方法**解决问题**使用XMLHttpRequest对象** 欢迎踩坑 很...
  • uniapp 在线预览pdf文件流(h5)

    千次阅读 热门讨论 2021-04-27 11:35:40
    uniapp h5 实现在线预览pdf文件流
  • 在VS code中打开网页预览

    千次阅读 2020-11-23 13:03:08
    在VS code中打开网页预览 在平时进行前端设计的时候,你是否会因为无法实时观察到网页的变化而苦恼,每一次都要重新打开html文件的过程过于繁琐,现在就有一种的方式能够让你在coding的时候实时观察到网页效果的...
  • JavaWeb实现office文件、PDF文件在线预览功能实现思想介绍使用插件(在服务器上下载并安装,紧记安装路径,后面会用到)OpenOfficeSwfTools使用的jar前端页面所需要的JSjodconverter-2.2.2.jar下载后台代码实现前端...
  • 在线打开wps文件demo

    2019-03-25 11:08:25
    在线打开wps文件,常用使用方法及实例demo
  • 打开本地临时文件。 二、后台给我返回的文件流: 三、需实现的效果是:点击列表中“查看发票”(左图),跳转到在线预览界面(右图,是微信自带的,不需要写ui界面)。 四、主要代码如下: // 在线预览发票...
  • 前端实现文件在线预览

    千次阅读 2020-09-03 15:22:45
    需求: 一个览pdf、word、xls、ppt等文件需要在线预览功能 介绍 使用 XDOC文档预览云服务文档地址 基于HTTP的REST方式调用,只需要传入URL! 支持pdf、docx、xlsx、pptx、rtf、jpg、png、mp4等多种文档格式! ...
  • 企业微信系列之JSSDK文件预览对接。企业微信JSSDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。 通过使用企业微信JSSDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的...
  • 纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 问题:Chrome 会...
  • 网页中实现安卓手机在线预览PDF文件

    万次阅读 热门讨论 2019-05-14 16:37:15
    苹果手机可以直接在线预览PDF文件,而安卓手机不行,必须得下载(如图),所以需要解决一下 1.准备所需js文件 (1)js下载地址https://mozilla.github.io/pdf.js/ (2)下载步骤 ①:打开网址后,点击图中的...
  • 问一下有没有遇到类似的问题, 在H5端实现文件下载,我现在直接 window.open(文件url);Android会吊起自带浏览器启动下载。 IOS会直接在当前webview开标签页显示文件预览。如何让ios上也可以直接下载文件
  • android 通过URL预览PDF文件预览本地pdf文件,下载pdf文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,622
精华内容 20,248
关键字:

文件流打开新页面预览