效果图
前端初始页面
上传doc,docx,xls,xlsx,ppt,pptx,txt成功页面
文件在线预览页面
环境介绍
JDK:1.8
数据库:Mysql5.6
前端:Vue
后端:SpringBoot
完整源码获取
核心代码介绍
pox.xml
<dependency> <groupId>com.asposegroupId> <artifactId>aspose-wordsartifactId> <version>16.8.0version>dependency><dependency> <groupId>com.asposegroupId> <artifactId>aspose-cellsartifactId> <version>8.5.2version>dependency> <dependency> <groupId>com.asposegroupId> <artifactId>aspose-slidesartifactId> <version>15.9.0version>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: 该类的功能描述**/@RestController@RequestMapping("/filetopaf")@CrossOrigin@Api(value="文件上传转pdf预览",tags={"文件上传转pdf预览"})public class UploadParsePdfCtrler { //源文件存储位置 @Value("${web.oring-save-path}") private String savePath; //生成pdf缓存位置 @Value("${web.upload-path}") private String pdftemppath; //项目访问名称 @Value("${server.servlet.context-path}") private String projName; @PostMapping("/uploadtopdf") @ApiOperation(value="批量文件上传转pdf预览") 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> 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 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> <div slot="tip" class="el-upload__tip">可以上传doc/xlsx/pdfdiv> 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>
--完--