精华内容
下载资源
问答
  • vue实现文件预览
    千次阅读
    2021-04-16 17:12:22

    1、可以预览图片、文档、视频等,视频需要安装视频预览插件:cnpm install --save video.js

    2、代码:

    <!-- @format -->
    
    <template>
      <div>
        <!--图片-->
        <div v-if="imgShow">
          <img :src="downloadUrl" />
        </div>
        <!--doc,excel-->
        <div v-else-if="docShow || excelShow">
          <iframe
            class="child"
            frameborder="0"
            :src="'https://view.officeapps.live.com/op/view.aspx?src=' + this.downloadUrl"
            :style="{ width: width, height: height }"
          >
          </iframe>
        </div>
        <!--视频-->
        <div v-else-if="videoShow">
          <video preload="auto" :height="height" :width="width" align="center" controls="true">
            <source :src="downloadUrl" type=&#
    更多相关内容
  • 针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf....
  • 主要为大家详细介绍了vue实现在线预览pdf文件和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue+SpringBoot实现文件预览

    千次阅读 2022-04-01 09:44:01
    一、前端代码 此处比较简陋,就用了一个window.open(“后端访问地址”) 二、后端代码 1.设置访问静态资源的地址映射 ... * 这里是映射文件路径的方法 */ @Override public void addResourceHandlers(ResourceH

    一、前端代码

    此处比较简陋,就用了一个window.open(“后端访问地址”)

    二、后端代码

    1.设置访问静态资源的地址映射

    新建了一个配置类,用于映射静态资源的地址。

    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
        /**
         * 这里是映射文件路径的方法
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry){ 										     registry.addResourceHandler("/radar/static/**").addResourceLocations("file:/E:/files/");
        }
    }
    

    说明:如果前端需要访问资源test.pdf,则访问后端的地址为:localhost:8080/radar/static/test.pdf。添加了这个映射之后,会到服务器的E:/files/下面寻找test.pdf文件进行访问。

    展开全文
  • Vue新手:实现文件预览功能的前端

    万次阅读 2019-03-27 14:51:49
    预览文件的前端 省略点击按钮点击触发showdialogview()方法的代码 第一种方法 先在template中加入一个input框,绑定一个字符串类型的变量 写showdialogview()方法 调用后台的方法,如果返回的不是null(后台返回的...

    预览文件的前端

    省略点击按钮点击触发showdialogview()方法的代码

    1. 第一种方法
      1. 先在template中加入一个input框,绑定一个字符串类型的变量
      2. 写showdialogview()方法
      3. 调用后台的方法,如果返回的不是null(后台返回的数据是一行一行返回的),就使用for循环,添加到变量中去。
    <template>
      <div class="content">
        <!--文件预览-->
        <el-dialog title="数据预览" :visible.sync="dialogvisibleview" >
          <el-input type="textarea" :rows="10" placeholder="" v-model="dataview">
          </el-input>
        </el-dialog>
      </div>
    </template>
    
    <script>
      import api from '../../api/api'
      import $ from 'jquery';
      import axios from 'axios';
      export default {
        name: "DataFile",
        inject: ['reload'],
        data(){
          return {
            dialogvisibleview: false, // 文件预览
            dataview: ''
          }
        },
        methods:{
          //预览文件
          showdialogview(id) {
            this.dataview ='';
            var dataView = new FormData;
           // var num=20;
            dataView.append("id",id);
            api.getDataDetail(dataView).then((response) => response.json())
              .then((data) => {
                if(data!=null){
                  this.dialogvisibleview = !this.dialogvisibleview;
                  //alert(data.data[0]);
                  for (var i=0;i<=data.data.length-1;i++){
                    this.dataview+=data.data[i]+"\n";
                  }
                }
              });
          }
        },
        created: function () {
          console.log('cteated 钩子执行...');
        }
      }
    </script>
    
    1. 第二中方法:
      1. 可以在对话框中加入一个table标签,在tbody标签中使用v-html绑定变量,这样,在字符串中的标签可以展示出来
      2. 因为后台给的接口返回的数据是数组中的一个下标对应的一行数据,把每一行的数据拆分成字符串数组,然后放在单元格中,这样展示出来比较整齐,还可以添加样式。
    <template>
      <div class="content">
        <!--预览的模态框-->
        <el-dialog title="文件内容预览" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%">
          <p style="color:red">若可视化,请选择数值列</p>
          <div id="modalContent" style="height: 600px;overflow:scroll;overflow-x:auto;overflow-y:auto ">
            <table id="box-table" style="border-collapse:collapse;height:60px;">
              <tbody id="table_body" v-html="datafileView"></tbody></table>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
      import api from '../../api/api'
      import $ from 'jquery';
      import axios from 'axios';
      export default {
        name: "DataFile",
        inject: ['reload'],
        data(){
          return {
             previewVisible:false,  // 预览模态框的
             datafileView:'', // 预览的表格
          }
        },
        methods:{
          // 打开预览的模态框
          openPreview (id){
            this.previewVisible = true;
            this.viewData(id);
          },
          // 在后台查询预览
          viewData (fid) {
            this.datafileView="";
            var dataView = new FormData;
            dataView.append("id",fid);
            api.getDataDetail(dataView).then((response) => response.json())
              .then((data) => {
                var viewDataString="<tr>";
                var dataArray = ((String)(data.data[0])).split(",");
                for(var i =0;i<dataArray.length;i++){
                  viewDataString=viewDataString+"<td style='text-align:center;width:10%'><input type='radio' name='tableheader' value='"+i+"' @click='f1()' /></td>";
                }
                viewDataString = viewDataString+"</tr><tr style='border-color:#1eb8f7;border-bottom-style:solid;border-width:1px'>";
                for(var i =0;i<dataArray.length;i++){
                  viewDataString = viewDataString+"<th style='text-align:center;width:10%'>"+dataArray[i]+"</th>";
                }
                viewDataString = viewDataString+"</tr>";
                console.log(data.data.length);
                for(var x=1;x<data.data.length;x++){
                  var dataArray = ((String)(data.data[x])).split(",");
                  viewDataString = viewDataString+"<tr>";
                  for(var i =0;i<dataArray.length;i++){
                    viewDataString = viewDataString+"<td style='text-align:center;width:15%'>"+dataArray[i]+"</td>";
                  }
                  viewDataString = viewDataString+"</tr>";
                }
                this.datafileView =viewDataString;
                console.log(this.datafileView );
              });
          }
        },
        created: function () {
          console.log('cteated 钩子执行...');
        }
      }
    </script>
    

    缺点:使用v-html,即使标签在浏览器中展示出来,但是里面的方法不可以使用,里面的方法失效。
    解决方法请查看本博客的其他文章。

    展开全文
  • vue+springboot文件预览

    2022-02-10 16:20:47
    一、下载OpenOffice 4 脚本之家下载地址:...百度网盘: ...提取码:vsbp 二、导入依赖 <!--文件预览--> <dependency> <groupId>org.jodconverter</groupId> <artifactId>

    一、下载OpenOffice 4

    脚本之家下载地址https://www.jb51.net/softs/595118.html
    百度网盘
    链接:https://pan.baidu.com/s/1x_GigpKrQiB_9g1_kmr8DQ
    提取码:vsbp

    二、导入依赖

      <!--文件预览-->
      <dependency>
          <groupId>org.jodconverter</groupId>
          <artifactId>jodconverter-core</artifactId>
          <version>4.0.0-RELEASE</version>
      </dependency>
      <!-- https://mvnrepository.com/artifact/com.artofsolving/jodconverter -->
      <dependency>
          <groupId>com.artofsolving</groupId>
          <artifactId>jodconverter</artifactId>
          <version>2.2.1</version>
      </dependency>
    

    三、controller层

    /**
         * 文件预览
         * @param id 文件保存时名称
         * @param name 文件原名
         * @param ext  文件后缀
         * @param request
         * @param response
         * @return
         * @throws Exception
         */
        @RequestMapping(value = "/inline")
        public String inline(String newName,String name,String ext,HttpServletRequest request,HttpServletResponse response){
            //BaseConfig.uploadPath + "flow_task" 是参数savepath, 为自己设置的文件保存路径
            return FileUtils.inline(BaseConfig.uploadPath + "flow_task", name, newName, ext,request,response);
    
        }
    
    

    四、创建工具类

    package com.oa.commons.util;
    
    import org.apache.commons.logging.Log;
    import org.apache.commons.logging.LogFactory;
    import org.artofsolving.jodconverter.OfficeDocumentConverter;
    import org.jodconverter.office.DefaultOfficeManagerBuilder;
    import org.artofsolving.jodconverter.office.OfficeManager;
    import org.springframework.util.StringUtils;
    
    import java.io.File;
    import java.util.regex.Pattern;
    
    /**
     * 这是一个工具类,主要是为了使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx)
     * 参考代码 :https://github.com/ourlang/preview
     * @author fangqm
     */
    public class FilePreviewUtil {
    
        private static final Log LOG = LogFactory.getLog(FilePreviewUtil.class);
    
    
        private FilePreviewUtil(){
    
        }
    
        /**
         * 使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx) 转化为pdf文件<br>
         * @param inputFilePath 源文件路径源文件路径
         * 源文件路径,如:"e:/test.doc"
         * @return 转换后的pdf文件
         */
        public static File openOfficeToPdf(String inputFilePath) {
            return office2pdf(inputFilePath);
        }
    
        /**
         * 根据操作系统的名称,获取OpenOffice.org 4的安装目录<br>
         * 如我的OpenOffice.org 4安装在:C:\Program Files (x86)\OpenOffice 4
         * 请根据自己的路径做相应的修改
         * @return OpenOffice.org 4的安装目录
         */
        private static String getOfficeHome() {
    		//这个路径为你自己安装openOffice的路径
            return "C:/Program Files (x86)/OpenOffice 4";
        }
    
        /**
         * 连接OpenOffice.org 并且启动OpenOffice.org
         *
         * @return OfficeManager对象
         */
        private static OfficeManager getOfficeManager() throws OfficeException {
            DefaultOfficeManagerBuilder builder = new DefaultOfficeManagerBuilder();
            // 设置OpenOffice.org 的安装目录
            String officeHome = getOfficeHome();
            builder.setOfficeHome(officeHome);
            // 启动OpenOffice的服务
            OfficeManager officeManager = builder.build();
            officeManager.start();
            return officeManager;
        }
    
        /**
         * 把源文件转换成pdf文件
         * @param inputFile 文件对象
         * @param outputFilePath pdf文件路径
         * @param inputFilePath 源文件路径
         * @param converter 连接OpenOffice
         */
        private static File converterFile(File inputFile, String outputFilePath, String inputFilePath, OfficeDocumentConverter converter) {
            File outputFile = new File(outputFilePath);
            // 假如目标路径不存在,则新建该路径
            if (!outputFile.getParentFile().exists()) {
                outputFile.getParentFile().mkdirs();
            }
            converter.convert(inputFile, outputFile);
            System.out.println("文件:" + inputFilePath + "\n转换为\n目标文件:" + outputFile + "\n成功!");
            return outputFile;
        }
    
        /**
         * 使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx) 转化为pdf文件<br>
         * @param inputFilePath 源文件路径
         * 源文件路径,如:"e:/test.doc"
         * 目标文件路径,如:"e:/test_doc.pdf"
         * @return  对应的pdf文件
         */
        private static File office2pdf(String inputFilePath) {
            OfficeManager officeManager = null;
            try {
                if (StringUtils.isEmpty(inputFilePath)) {
                    LOG.info("输入文件地址为空,转换终止!");
                    return null;
                }
                File inputFile = new File(inputFilePath);
                // 转换后的文件路径 这里可以自定义转换后的路径,这里设置的和源文件同文件夹
                String outputFilePath = getOutputFilePath(inputFilePath);
    
                if (!inputFile.exists()) {
                    LOG.info("输入文件不存在,转换终止!");
                    return null;
                }
                // 获取OpenOffice的安装路劲
                officeManager = getOfficeManager();
                // 连接OpenOffice
                OfficeDocumentConverter converter = new OfficeDocumentConverter(officeManager);
    
                return converterFile(inputFile, outputFilePath, inputFilePath, converter);
            } catch (Exception e) {
                LOG.error("转化出错!", e);
            } finally {
                // 停止openOffice
                if (officeManager != null) {
                    officeManager.stop();
                }
            }
            return null;
        }
    
        /**
         * 获取输出文件路径 可自定义
         * @param inputFilePath 源文件的路径
         * @return 取输出pdf文件路径
         */
        private static String getOutputFilePath(String inputFilePath) {
            return inputFilePath.replaceAll("." + getPostfix(inputFilePath), ".pdf");
        }
    
        /**
         * 获取inputFilePath的后缀名,如:"e:/test.doc"的后缀名为:"doc"<br>
         * @param inputFilePath 源文件的路径
         * @return 源文件的后缀名
         */
        private static String getPostfix(String inputFilePath) {
            int index = inputFilePath.lastIndexOf('.');
            return inputFilePath.substring(index+1);
        }
    
    }
    
    

    五、返回响应数据给前端

     /**
    	 * 预览文件
    	 * @param savePath	保存目录
    	 * @param name		文件原名
    	 * @param nowName	保存时的UUID 不包含后缀
    	 * @param ext		文件后缀
    	 * @param request
    	 * @param response
    	 * @return
    	 */
        public static String inline(String savePath,String name,String uuid,String ext,HttpServletRequest request,HttpServletResponse response){
    		response.addHeader("Access-Control-Allow-Origin", "*");
        	OutputStream toClient=null;
        	try{
        		String path=savePath+"/"+uuid+"."+ext;
        		//判断此文件是否为pdf
    			File file=null;
    			if(ext.equals("pdf")){
    				//如果是pdf
    				file = new File(path);
    			}else{
    				//如果不是,转化为pdf
    				file =FilePreviewUtil.openOfficeToPdf(path);
    			}
    	        if(!file.exists()){
    	        	//不存在
    				request.setAttribute("name", name);
    	        	return "download_error";//返回下载文件不存在
    			}
    			//把转换后的pdf文件响应到浏览器上面
    			FileInputStream fileInputStream = new FileInputStream(file);
    			BufferedInputStream br = new BufferedInputStream(fileInputStream);
    			byte[] buf = new byte[1024];
    			int length;
    			// 清除首部的空白行。非常重要
    			response.reset();
    			//设置调用浏览器嵌入pdf模块来处理相应的数据。
    			response.setContentType("application/pdf");
    			response.setHeader("Content-Disposition","inline; filename=" + URLEncoder.encode(file.getName(), "UTF-8"));
    			OutputStream out = response.getOutputStream();
    			//写文件
    			while ((length = br.read(buf)) != -1){
    				out.write(buf, 0, length);
    			}
    			br.close();
    			out.close();
    	        return null;
    	      }catch (Exception e) {
    	    	  e.printStackTrace();
    	    	  response.reset();
    	    	  return "exception";//返回异常页面
    	      }finally{
    				if(toClient!=null){
    		           	 try {
    		           		toClient.close();
    					  } catch (IOException e) {
    							e.printStackTrace();
    						}
    		            }
    				}
        }
    

    六、前端接收数据

    1、js代码

    //文件预览
    export function preview(fileId) {
      return request({
        url:'/eos/upload/previews/'+fileId,
        method:'get',
        responseType: 'blob'
      })
    }
    

    2、Vue代码

      //文件预览
      preview(){
          preview(this.ids).then(resp => {
              var blob = new Blob([resp],{
                  type: 'application/pdf;chartset=UTF-8'
              });
              console.log("preview"+resp);
              var fileURL = URL.createObjectURL(blob)
              window.open(fileURL)
          });
      }
    
    展开全文
  • vue项目中实现pdf文件预览功能

    万次阅读 2019-08-09 18:21:55
    vue项目中实现pdf文件预览功能 最近遇到一个实现pdf文件预览功能的需求,分享一下实现方法: pdf预览相对word、excel、ppt等文件的预览比较容易,因为常见的浏览器都是支持pdf文件直接预览,所以最简单的实现方法...
  • SpringBoot+Vue实现文件上传+预览

    千次阅读 2020-09-02 22:46:32
    从松哥的微信公众号上面看到了SpringBoot+Vue实现文件上传+预览的视频教程,如下图所示: 跟着做,使用IDEA一遍看一边做,没想到由于自己马虎将日期SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/...
  • 主要介绍了vue中如何实现pdf文件预览的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 这里分两种网络情况来叙说:外网、内网 txt、pdf可被浏览器直接打开,就不说了,只要有浏览器两种网络情况都可打开...1、网络上提供很多开放的js插件,对应的文件如下 .doc、.docx docx-preview .pptx pptx
  • Vue前端技术实现文件预览(word、excel、pdf、ppt、mp4、图片、文本) 实现方案 docx文件实现前端预览 代码实现 实现效果 pdf实现前端预览 代码实现 实现效果 excel实现前端预览 代码实现 实现效果 pptx...
  • 之前做PDF预览一直用的pdf.js,这次想需求们那么多想简化下,决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,重要是这个组件使用简单。下面我们直接进入正题! 一、安装vue-pdf npm ...
  • vue实现在线预览office文件

    千次阅读 2021-10-20 16:53:39
    按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定。 顶不住第三方基本上是要money的。那不想掏money,还有什么解决方法呢。 方法一 用微软的office online进行在线...
  • 于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样...
  • 主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 实现pdf文件在线预览

    千次阅读 2021-06-08 16:29:39
    PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下 第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <template> <div> <pdf ref="pdf" v-...
  • vue移动端文件预览

    千次阅读 2021-12-10 13:52:44
    vue移动端文件预览前言:整体思路:具体实现:一、外壳(vViews.vue):二、文件预览:1.图片预览:2.pdf文件预览:3.docx文件预览:4.excel表格预览(xls、xlsx格式表格):5.txt文件预览:三、补充外壳文件css样式...
  • 最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,...
  • vue+element-ui实现上传及预览文件

    千次阅读 2021-02-09 16:55:55
    上篇文章分享了微信小程序上传及预览文件的方法,本篇文章来分享一下vue+element实现上传及预览文件的方法,upload上传文件方法,是element-ui提供的方法,主要是利用其参数绑定方法进行上传操作,有想要深入了解的/...
  • 1、在项目public的index.html引入js <script id="scriptApi" type="text/...</script> 2、在vue页面中写html代码 <div @click=print2> <div ref="demo" style="height: 80vh;margin-top: 1
  • 主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...
  • vue 预览文件

    2022-02-15 10:58:25
    /**拿预览文件的ID */ /**fileId-》文件id */ dataFile.append("fileid", fileId); // this.$axios-》封装的请求方法 this.$axios("请求地址", dataFile).then(res => { let getUrl = '路径' + res.data....
  • 主要为大家详细介绍了vue element upload实现图片本地预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue中如何实现pdf文件预览

    千次阅读 2018-07-12 10:47:00
    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,226
精华内容 4,090
关键字:

vue实现文件预览