点击上方 web项目开发，选择 设为星标javascript
优质文章，及时送达css
效果图前端
前端初始页面
vue
上传doc，docx，xls，xlsx，ppt，pptx，txt成功页面
java
文件在线预览页面web
环境介绍spring
JDK：1.8sql
数据库：Mysql5.6数据库
前端：Vue
element-ui
后端：SpringBoot
完整源码获取
扫码关注回复括号内文字【办公软件】获取源码
若是你在运行这个代码的过程当中有遇到问题，请加小编微信xxf960513，我拉你进对应微信学习群！！帮助你快速掌握这个功能代码！
核心代码介绍
pox.xml
<!-- asp word,excel转pad支持 --><dependency> <groupId>com.aspose</groupId> <artifactId>aspose-words</artifactId> <version>16.8.0</version></dependency><dependency> <groupId>com.aspose</groupId> <artifactId>aspose-cells</artifactId> <version>8.5.2</version></dependency> <dependency> <groupId>com.aspose</groupId> <artifactId>aspose-slides</artifactId> <version>15.9.0</version></dependency>
UploadParsePdfCtrler.class
package com.yxyz.ctrler;import java.io.FileOutputStream;import java.io.InputStream;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Value;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import com.yxyz.rest.CodeMsg;import com.yxyz.rest.Result;import com.yxyz.util.AsposeUtil;import com.yxyz.util.FileUtil;import com.yxyz.util.StringUtil;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;/** * Copyright @ 2020 Zonlyn. All rights reserved.
* @Description: 该类的功能描述**/public class UploadParsePdfCtrler { //源文件存储位置 private String savePath; //生成pdf缓存位置 private String pdftemppath; //项目访问名称 private String projName; public Object uploadToPdf(HttpServletRequest request,MultipartFile[] files) throws Exception { if(null == files || files.length == 0) { return Result.error(CodeMsg.NOFILEUPLOAD); } //判断是否配置了项目名称 projName = StringUtils.isEmpty(projName)?"":projName; //缓存 文件存储名、源名称对应关系、预览地址 List<Map<String,String>> saveName_orinName_Url = new ArrayList<>(); FileUtil.checkExistDir(savePath); FileUtil.checkExistDir(pdftemppath); for(MultipartFile file : files) { /* * 保存上传文件 */ //文件存储名 //源文件名 String orinName = file.getOriginalFilename(); String preName = StringUtil.getUuid(); String stuffName = orinName.substring(orinName.lastIndexOf(".")); String svName = preName + stuffName; byte[] cache = new byte[1024]; int hasRead = 0; InputStream in = file.getInputStream(); FileOutputStream out = new FileOutputStream(savePath+svName); while((hasRead=in.read(cache, 0, cache.length)) != -1) { out.write(cache, 0, hasRead); } out.flush(); if(null != out) { out.close(); } if(null != in) { in.close(); } /* * 上传文件转换pdf，存储至 ${web.upload-path} */ String pdfSaveName = pdftemppath+preName+".pdf"; AsposeUtil.trans(savePath+svName, pdfSaveName); String httpUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +projName+"/"+ preName+".pdf"; Map<String,String> rs = new HashMap<>(); rs.put("oldname", orinName); rs.put("newname", preName+".pdf"); rs.put("url", httpUrl); saveName_orinName_Url.add(rs); } return Result.success(saveName_orinName_Url); }}
main.js
import Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'// import locale from 'element-ui/lib/locale/lang/en' // lang i18nimport '@/styles/index.scss' // global cssimport App from './App'import store from './store'import router from './router'
import '@/icons' // iconimport '@/permission' // permission control/** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online ! ! ! */if (process.env.NODE_ENV === 'production') { const { mockXHR } = require('../mock') mockXHR()}// set ElementUI lang to ENVue.use(ElementUI)// 若是想要中文版 element-ui，按以下方式声明// Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({ el: '#app', router, store, render: h => h(App)})
index.vue
<template> <div class="dashboard-container"> <el-upload ref="upload" multiple class="upload-demo" action="http://139.159.147.237:8080/yxyz/filetopaf/uploadtopdf" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :before-upload="beforeUpload" list-type="picture" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> --> <div slot="tip" class="el-upload__tip">能够上传doc/xlsx/pdf</div> </el-upload> </div></template><script>export default { name: 'Dashboard', components: { }, data() { return { fileList: [], dialogVisible: false,
pdfUrl: '' } }, computed: {}, created() { this.fileArr = [] }, methods: { handleRemove(file, fileList) { console.log(file, fileList) }, handlePreview(file) { console.log(file, 'hha') // if (file.raw.type === 'application/pdf') { // this.pdfUrl = file.response.data[0].url // this.dialogVisible = true // return // } window.open(file.response.data[0].url) }, beforeUpload(file) { console.log(file) } }}</script><style lang="scss" scoped>.dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; }}</style>
--完--
若是你以为这个案例以及咱们的分享思路不错，对你有帮助，请分享给身边更多须要学习的朋友。别忘了《留言+点在看》给做者一个鼓励哦！
一、springboot+mybatis+vue先后端分离实现用户登录注册功能
三、SpringBoot+Spring Data JPA+Vue先后端分离实现分页功能
四、SpringBoot+Spring Data JPA+Vue先后端分离实现Excel导出功能
五、Spring Boot + Vue先后端分离实现图片上传功能
六、springboot+jpa+tymeleaf实现分页功能
七、springboot+jpa+thymeleaf实现信息修改功能
十、springboot+jpa+thymeleaf实现信息增删改查功能
十二、Springboot+layui先后端分离实现word转pdf功能
1三、用java将本地图片转base64格式， 再转图片！你用过这个功能？
1四、springboot+layui+thymelefe实现用户批量添加功能
1五、springboot+Tymeleaf实现用户密码MD5加盐解密登陆
1六、springboot+vue实现用户注册后必须经过邮箱激活才能登陆激活才能登陆
1九、springboot+vue实现不一样管理权限的用户登录展现的菜单栏目不一样功能
20、Springboot+vue实现上传视频并在线播放功能
2一、SpringBoot+Vue先后端分离实现邮件定时发送功能
2三、Springboot+Vue先后端分离实现Excle文件导入并在前端页面回显功能
2四、Springboot+Vue实现从数据库中获取数据生成树状图在前端页面展现功能
2五、Springboot+Vue实现从数据库中获取数据生成饼状图并在前端页面展现功能
为了方便你们更好的学习，本公众号常常分享一些完整的单个功能案例代码给你们去练习，若是本公众号没有你要学习的功能案例，你能够联系小编（微信：xxf960513）提供你的小需求给我，我安排咱们这边的开发团队免费帮你完成你的案例。
注意：只能提单个功能的需求不能要求功能太多，好比要求用什么技术，有几个页面，页面要求怎么样？
本文分享自微信公众号 - web项目开发（javawebkaifa）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。