font-tool.vue

<template>
  <div class="app-container">
    <h3>字体转换工具</h3>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-input
          type="textarea"
          :autosize="{ minRows: 30, maxRows: 30 }"
          resize="none"
          placeholder="请选择要转换的文本"
          v-model="post.text"
        ></el-input>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-form label-position="right" label-width="120px" :model="post">
          <el-form-item label="输出bin文件名">
            <el-input v-model="post.filename"></el-input>
          </el-form-item>
          <el-form-item label="文字大小">
            <el-input
              v-model="post.sizes"
              placeholder="可输入多个数值，用英文逗号隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="字库文件">
            <el-upload
              name="font"
              ref="upload"
              accept=".eot,.otf,.fon,.font,.ttf,.ttc,.woff"
              :limit="1"
              :multiple="false"
              :data="post"
              :action="uploadAction"
              :on-success="handleSuccess"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false"
            >
              <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">
                请选择字库文件，目前只支持如下格式文件：eot,otf,fon,font,ttf,ttc,woff
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click="loadFont('common')">加载常用字体</el-button>
            <el-button @click="loadFont('all')">加载全部字体</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import allFonts from "@/assets/all-fonts.json";
import commonFonts from "@/assets/common-used-fonts.json";
import { generateFont } from "@/api/store";
// import { mapTrim } from '@/utils/index'

// 优化：可以取字体差异，POST只发送产生差异的字，比如删除的字、添加的字

export default {
  name: "FontTool",
  data() {
    return {
      isLoading: false,
      inputString: commonFonts.join(""),
      outputString: "",
      post: {
        sizes: null,
        filename: null,
        text: commonFonts.join(""),
      },
      uploadAction: `//${window.location.host}/api/v1/evm_store/system/generateFont`,
      fileList: [],
    };
  },
  methods: {
    downloadFile(result) {
      const a = document.createElement("a");
      a.download = result.filename;
      a.href = result.url;
      a.target = "";
      a.click();
    },
    loadFont(source) {
      if (source == "all") this.post.text = allFonts.join("");
      else this.post.text = commonFonts.join("");
    },
    handleUpload() {
      let formData = new FormData();
      Object.keys(this.post).forEach((k) => {
        formData.append(k, this.post[k]);
      });
      generateFont(formData)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleSuccess(res) {
      if (res.code == 200) {
        this.downloadFile(res.data);
      }
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  mounted() {},
  created() {},
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>