文档章节

文件导入,导出与在线编辑(SpringBoot+Vue)

Gx_ww
 Gx_ww
发布于 10/10 18:43
字数 1474
阅读 30
收藏 0

一.前言

本篇工作笔记为记录使用springboot+vue实现文件(html页面)导入,导出与在线编辑。

实体类 Templet :

@Data
@Table("templet")
public class Templet extends BaseEntity {
    /**
     * 模板主键
     */
    @Name
    @Prev(els = @EL("uuid(32)"))
    @Column("ID")
    private String id;
    /**
     *站点ID
     */
    @Column("SITE_ID")
    private String siteId;
    /**
     *模板名称
     */
    @Column("TEMPLET_NAME")
    private String templetName;
    /**
     * 模板英文名称
     */
    @Column("TEMPLET_ENGLISH_NAME")
    private String templetEnglishName;
    /**
     *模板文件类型
     */
    @Column("TEMPLET_TYPE")
    private String templetType;
    /**
     *模板大小
     */
    @Column("TEMPLET_SIZE")
    private String templetSize;
    /**
     *发布状态
     */
    @Column("IS_PUBLISHED")
    private int isPublished;
    /**
     *模板存放路径
     */
    @Column("TEMPLET_PATH")
    private String templetPath;
    /**
     *是否是目录
     */
    @Column("IS_DIRECTORY")
    private int isDirectory;
    /**
     *父级模板目录ID
     */
    @Column("PARENT_ID")
    private String parentId;
    /** 所属站点*/
    @One(field = "siteId")
    private Site site;

    @Column("TYPE")
    private String type;
    /**
     * 文件内容
     */
    @Transient
    private String fileContent;

    //主要用于显示模板名称
    private String fileName;

    public String getFileName() {
        if (this.isDirectory==1) {
            return this.templetName + "." + templetType;
        }else{
            return this.templetName;
        }
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }
}

Vue页面,文档在线编辑部分

<FormItem label="文件内容" prop="fileContent" v-show="contentFlag">
            <Input v-model="dataTemplet.fileContent" type="textarea" :autosize="{minRows: 20,maxRows: 25}" placeholder="请填写文件内容"></Input>
</FormItem>

在线编辑,获取文档内容:

public Templet getReadTemplet(String id) throws Exception {
        Templet templet = nutzDao.fetch(Templet.class, id);
        if (templet.getIsDirectory() == 1) {
            Site site = siteService.fetch(templet.getSiteId());
            path = ConfigUtil.getConfigByCode("SITE_ROOT_PATH") + fileSeparator + site.getResourcePath();
            String filePath = path + templet.getTempletPath();
            String str = FileUtils.readFileToJson(filePath);
            templet.setFileContent(str);
        } else {
            String templetPath = templet.getTempletPath();
            templet.setTempletPath(templetPath.substring(templetPath.lastIndexOf("/")+1));
        }
        return templet;
    }

/**
     * 读取文件转化为json
     */
    public static String readFileToJson(String path) throws IOException {
        InputStream is = null;
        InputStreamReader isr;
        String str = null;
        try{
            isr = new InputStreamReader(new FileInputStream(path), "UTF-8");
            str = inputStreamToJson(isr);
        }catch (FileNotFoundException e) {
            throw new FileNotFoundException("源文件没有找到");
        }
        return str;
    }

/**
     * inputStream转json
     */
    private static String inputStreamToJson(InputStreamReader is) throws IOException {
        String line;
        String str = "";
        BufferedReader br = new BufferedReader(is);
        while ((line = br.readLine()) != null) {
            str += new String(line.getBytes(),"UTF-8")+"\n";
        }
        return str;
    }

在线编辑,新增或编辑更改:

public void saveNewTemplet(Templet templet) throws Exception {
        String path= ConfigUtil.getConfigByCode("SITE_ROOT_PATH");
        Templet tplt = this.fetch(templet.getParentId());
        if (null != tplt) {
            String parentTempletPath = tplt.getTempletPath();
            Site site = siteService.fetch(tplt.getSiteId());
            if (null != site && StringUtils.isNotBlank(site.getResourcePath())) {
                templet.setSiteId(site.getId());
                path = FileUtils.getSplicingPath(path, site.getResourcePath());
                path = FileUtils.getSplicingPath(path, parentTempletPath);
                File dir = new File(path);
                if (!dir.exists()) {
                    dir.mkdirs();
                }
                File file = new File(FileUtils.getSplicingPath(path, templet.getTempletName()+"."+templet.getTempletType()));
                if (!file.exists()) {
                    boolean fileFlag = file.createNewFile();
                    if(fileFlag){
                        log.info(file.getName() + "文件创建成功");
                    }
                }
                if (StringUtils.isNotBlank(templet.getFileContent())) {
                    templet.setTempletSize(FileUtils.getPrintSize(templet.getFileContent().length()));
                }
                templet.setTempletPath(FileUtils.getSplicingPath(parentTempletPath, templet.getTempletName()+"."+templet.getTempletType()));
                FileWriter writer = null;
                try {
                    writer = new FileWriter(file);
                    writer.write(templet.getFileContent());
                }catch (Exception e){
                    log.debug(" 文件上传异常"+e);
                }
                finally {
                    writer.close();
                }
                if (StringUtils.isNotBlank(templet.getId())) {
                    templet.setUpdateTime(DateUtil.getTodayTimeString());
                    this.nutzDao.update(templet);
                } else {
                    templet.setCreateTime(DateUtil.getTodayTimeString());
                    templet.setUpdateTime(DateUtil.getTodayTimeString());
                    this.nutzDao.insert(templet);
                }
            }
        }
    }

模板上传,导入

vue页面相关部分:


<Form ref="dataTemplet" :model="dataTemplet" :rules="ruleValidate" :label-width="130">
          <FormItem label="所属目录" prop="pname">
            <Input v-model="dataTemplet.pname" disabled></Input>
          </FormItem>
          <Row>
            <Col span="12">
              <FormItem label="文件上传" prop="templetPath">
                <div>
                  <Upload
                    multiple
                    ref="upload"
                    accept="text/html"
                    :max-size="2048"
                    :format="['html']"
                    :before-upload="handleUpload"
                    :show-upload-list="false"
                    :data="dataTemplet"
                    :action="uploadPath"
                    :on-success="uploadSuccess"
                  >
                    <i-button icon="ios-cloud-upload-outline">上传</i-button>
                  </Upload>

                </div>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="模板类型" prop="type">
                <Select v-model="dataTemplet.type" placeholder="请选择模板类型">
                  <Option value="0">列表页</Option>
                  <Option value="1">详情页</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <ul v-if="file!=null" v-for="(item, index) in file" style="margin-left: 120px;">
                <span>模板{{index+1}}: {{item.name == undefined ? item.fileName : item.name }}</span>
                <Button type="text" @click="moveMaterial(item, index)">删除模板</Button>
              </ul>
            </Col>
          </Row>
          <FormItem label="备注" prop="remark">
            <Input v-model="dataTemplet.remark" type="textarea" placeholder="请填写备注"></Input>
          </FormItem>
          <FormItem style="text-align: right;">
            <Button type="primary" @click="templetSubmit('dataTemplet')" :loading="saveLoading">保存</Button>
            <Button type="warning" @click="templetReset('dataTemplet')" style="margin-left: 8px">重置</Button>
            <Button type="default" @click="hideView" style="margin-left: 8px">取消</Button>
          </FormItem>
</Form>

data() {
      return {
        fileCount: 0,
        file: [],
        uploadSuccessCount:0,
        uploadErrorCount:0,
        deleteFile: [],
        tempName: "",
        uploadPath: "",
        siteList: [],
        saveLoading: false,
        typesFlag: false,
        dialogTitle: "导入模板",
        ruleValidate: {
          type: [{
            required: true,
            message: "模板类型不能为空",
            trigger: "change"
          }],
        },
        dataTemplet: {
          parentId: "",
          pname: ""
        }
      }
    },

methods: {
      //上传
      upload() {
        for (let i = 0; i < this.file.length; i++) {
          let item = this.file[i];
          var Img = item.name.substring(item.name.lastIndexOf('.') + 1)
          if (Img === 'html') {
            this.$refs.upload.post(item);
          } else {
            this.$Message.error({content: '上传资源只能是html格式!', duration: 3})
          }
        }
      },
      //上传成功
      uploadSuccess(data) {
        if ( data.resultCode === 0) {
          this.uploadSuccessCount = this.uploadSuccessCount + 1;
        } else {
          this.uploadErrorCount = this.uploadErrorCount + 1;
        }
        if (this.uploadErrorCount+this.uploadSuccessCount===this.fileCount) {
          this.$Message.success({
            content: "共上传文件数:"+(this.uploadSuccessCount+this.uploadErrorCount)+
              ",成功数:"+this.uploadSuccessCount+",失败数:"+this.uploadErrorCount, duration: 3});
        }
        this.hideView();
      },
      handleUpload(file) {
        this.file.push(file);
        return false;
      },
      //移除附件
      moveMaterial(file, index) {
        if (file.name === undefined) {
          this.deleteFile.push(file);
        }
        this.file.splice(index, 1);
      },

      //上传路径
      setUploadPath() {
        let token = sessionStorage.getItem("access_token");
        this.uploadPath = "/iscs_gateway/cms/templet/templeUpload?access_token=" + token;
      },

     // 输入校验
      templetSubmit(name) {
        this.fileCount = this.file.length;
        if (this.file.length > 0) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.submit();
            }
          })
        } else {
          this.$Message.error("请选择文件!")
        }
      },

      //提交保存
      submit() {
        let loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
        this.dataTemplet.createUser = loginUser.user.userAccount;
        this.dataTemplet.parentId = this.parentObj.pid;
        this.upload();
      }
    }

后台代码:

 @ApiOperation(value = "模板上传", notes = "模板上传")
    @RequestMapping(value = "/templeUpload", method = {RequestMethod.POST},produces = "application/json")
    public ResultMsg templeUpload(MultipartHttpServletRequest req) {
         String path= ConfigUtil.getConfigByCode("SITE_ROOT_PATH");
        try {
            MultiValueMap<String, MultipartFile> map = req.getMultiFileMap();
            String uploadPath = "";
            String siteId = "";
            String user = req.getParameter("createUser");
            String remark = req.getParameter("remark");
            String parentId = req.getParameter("parentId");
            String tempType = req.getParameter("templetType");
            String type = req.getParameter("type");
            Templet templet = new Templet();
            templet.setIsPublished(1);
            templet.setParentId(parentId);
            templet.setIsDirectory(1);
            templet.setCreateUser(user);
            templet.setRemark(remark);
            templet.setType(type);
            templet.setTempletType(tempType);
            if (StringUtils.isNotBlank(parentId)) {
                Templet parentTemplet = templetService.getTemplet(parentId);
                String parentPath = "";
                if (null != parentTemplet) {
                    siteId = parentTemplet.getSiteId();
                    Site site = siteService.fetch(siteId);
                    if (null != site && StringUtils.isNotBlank(site.getResourcePath())) {
                        uploadPath += site.getResourcePath();
                    }
                    uploadPath = FileUtils.getSplicingPath(uploadPath,parentTemplet.getTempletPath());
                    parentPath =parentTemplet.getTempletPath();

                    SysConfig config = configService.findConfigByCode("SITE_ROOT_PATH");
                    uploadPath = FileUtils.getSplicingPath(config.getConfigValue(), uploadPath);
                    if (map.size() != 0) {
                        for (List<MultipartFile> materialList : map.values()) {
                            for (MultipartFile mFile : materialList) {
                                templetService.saveFileByIO(mFile, "/", uploadPath, 0);
                                String fileName = mFile.getOriginalFilename();
                                String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
                                String newFileName=fileName.substring(0,fileName.lastIndexOf("."));
                                templet.setTempletName(newFileName);
                                templet.setTempletPath("/"+parentPath + "/" + fileName);
                                templet.setSiteId(siteId);
                                templet.setTempletType(suffix);
                                templet.setTempletSize(FileUtils.getPrintSize(mFile.getSize()));
                                templet.setCreateTime(DateUtil.getTodayTimeString());
                                templet.setUpdateTime(DateUtil.getTodayTimeString());
                                //如果名字是一样的,更新文件
                                Templet templetNew=templetService.checkName(templet.getParentId(),newFileName);
                                if (templetNew!=null){
                                    templetNew.setTempletSize(FileUtils.getPrintSize(mFile.getSize()));
                                    templetNew.setTempletPath("/"+parentPath + "/" + fileName);
                                    templet.setUpdateTime(DateUtil.getTodayTimeString());
                                    templetService.update(templetNew);
                                }
                                else {
                                    templetService.insert(templet);
                                }
                            }
                        }
                    }
                }
            }
            return returnSuccess("导入成功!");
        } catch (Exception e) {
            log.debug(e.getMessage());
            return this.returnError("查询失败","查询失败",e);
        }
    }
@ResponseBody
    @ApiOperation(value = "模板导出", notes = "模板导出")
    @RequestMapping(value = "/exportTemplet", method = {RequestMethod.GET})
    public ResultMsg exportTemplet(
                    @ApiParam(value = "siteId", required = false) @RequestParam String siteId,
                    @ApiParam(value = "目录或模板id", required = false) @RequestParam String ids, HttpServletResponse response) {
        Site site=null;
        String path = ConfigUtil.getConfigByCode("SITE_ROOT_PATH");
        String sitePath="";
        if (StringUtils.isNotEmpty(siteId)){
            site = siteService.fetch(siteId);
            sitePath=site.getResourcePath();
        }
        String basePath=path + fileSeparator + sitePath ;
        String pathFile="模板导出"+DateUtil.dateToStr(new Date(),5);
        File toFile = new File(basePath+"/"+pathFile);
        if(!toFile.exists()){
            toFile.mkdirs();
        }
        FileOutputStream fos =null;
        try {
            fos = new FileOutputStream(new File(basePath+"/"+pathFile+".zip"));
        } catch (FileNotFoundException e) {
            log.error(e);
        }
        if(StringUtil.isNotEmpty(ids)){
            String[] newIds=ids.split(",");
            List<Templet> templetList=templetService.getTempletByIds(newIds);
            for(Templet templet:templetList){
                File file=null;
                if (templet.getIsDirectory()==1){
                        String pathStr=basePath+templet.getTempletPath();
                        file=new File(pathStr);
                } else{
                        String pathStr=basePath+getTempletPath(templet)+"/"+templet.getTempletPath();
                     file=new File(pathStr);
                }
                if (file.exists()) {
                    try {
                        ZipUtils.copy(file, toFile);
                    } catch (Exception e) {
                        log.error(e);
                    }
                }
            }
            ZipUtils.toZip(toFile.getPath(), fos,true);
            if (fos!=null){
                try {
                    fos.close();
                } catch (IOException e) {
                    log.error(e);
                }
            }
             //导出文件到客户端
            new ZipFileExport().downImgClient(response,pathFile+".zip",basePath+"/"+pathFile+".zip");
             //导出后删除文件
            ZipUtils.deleteFolder(basePath+"/"+pathFile+".zip");
            ZipUtils.deleteDirectory(basePath+"/"+pathFile);
            return returnSuccess("导出成功");
        }else{
            File file=new File(basePath+"/template");
            ZipUtils.toZip(file.getPath(), fos,true);
            if (fos!=null){
                try {
                    fos.close();
                } catch (IOException e) {
                    log.error(e);
                }
            }
            //导出文件到客户端
            new ZipFileExport().downImgClient(response,pathFile+".zip",basePath+"/"+pathFile+".zip");
            //导出后删除文件
            ZipUtils.deleteFolder(basePath+"/"+pathFile+".zip");
            return returnSuccess("导出成功");
        }
    }

 

© 著作权归作者所有

Gx_ww

Gx_ww

粉丝 0
博文 26
码字总数 15948
作品 0
兰州
私信 提问
Jeecg-Boot 2.0.0 发布,基于 Springboot+Vue 前后端分离快速开发平台

Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发平台!采用前后端分离技术:SpringBoot,Mybatis,Shiro,JWT,Vue & Ant Design。提供强大的代码生成器, 前端页面和后台代码...

Jeecg
05/20
14.7K
6
Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台

目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发平台!采用前后端分离技术:Spri...

Jeecg
05/20
1K
0
PHPRAP v1.0.7 版本发布,新增数据字典功能

PHPRAP,是一个 PHP 轻量级开源 API 接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造 PHP 版的 RAP 。 更新记录 【修复】修复在PHP7.1及之上版本部分页面报错的BUG...

够过瘾
2017/12/01
648
6
PHPRAP v1.0.8 版本发布,安装时数据库不存在自动创建

PHPRAP,是一个 PHP 轻量级开源 API 接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造 PHP 版的 RAP 。 PHPRAP已被GVP(码云最有价值开源项目计划)收录 更新记录 【修...

够过瘾
2017/12/13
522
2
在线Oracle ER模型制作

概述 ER模型使用可视化了实体存储的信息,以及直观的呈现了实体与实体的关系,在我们实际的应用系统开发过程中新建ER模型可以更好的理解业务模型,为以后的开发维护工作起到归纳总结的作用。...

349767068q
07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

360常用小工具分享 独立版 360驱动网卡版

有些朋友为了修复断网或者修复LSP,都会选择去下载360,用完再删除有些麻烦。所以自己收集了18个实用小工具独立版本方便坛友使用。只做分享,不喜勿喷。 360驱动网卡版:链接: https://pan.b...

xiaogg
2分钟前
1
0
批量删除表中某字段

select * from information_schema.columns where table_schema='erp-zyjsgx-v2' and column_name='manageflag'; alter table jz_xiangmudj drop column manageflag;......

glen_xu
4分钟前
1
0
JavaScript面试题总结系列(八)

8. JavaScript - this对象 this对象 this总是指向函数的直接调用者(而非间接调用者) 如果有new关键字,this指向new出来的那个对象 在事件中,this指向触发这个事件的对象,特殊的是,IE中的...

张森ZS
7分钟前
0
0
Apache Camel Spring Boot

Camel应用初始化 Apache Camel 采用的是组件化的设计思想,通过Camel Component对接第三方的应用,Camel核心模块会扫描classpath 加载这些Camel Component。 Camel应用在启动的过程中,需要将...

WillemJiang
8分钟前
2
0
数据管理必看!Kendo UI for jQuery过滤器状态保持

Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue......

FILA6666
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部