點擊上方 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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。