vue 在線更換字體 字體列表使用node.js遍歷

上圖是效果預覽
字體列表

更換字體

node 遍歷字體文件列表
遍歷函數

/**
 *
 * @param dirPath
 * @param arr
 */
function fileDisplay(dirPath, arr) {
    var filesList = fs.readdirSync(dirPath);
    for (var i = 0; i < filesList.length; i++) {
        //描述此文件/文件夾的對象
        var fileObj = {};
        let thePath = '/static/font/'+filesList[i]
        fileObj.path = thePath
        fileObj.name = filesList[i].split('.')[0];
        //拼接當前文件的路徑(上一層路徑+當前file的名字)
        var filePath = path.join(dirPath, filesList[i]);
        //根據文件路徑獲取文件信息，返回一個fs.Stats對象
        var stats = fs.statSync(filePath);

        if (stats.isDirectory()) {
            //如果是文件夾
            fileObj.type = 'dir';
            fileObj.child = [];
            arr.push(fileObj);
            //遞歸調用
            fileDisplay(filePath, arr[i].child);
        } else {

            //不是文件夾,則添加type屬性爲文件後綴名
            fileObj.type = path.extname(filesList[i]).substring(1);

            arr.push(fileObj);
        }
    }
}

接口

async font() {
        const {ctx} = this;
        let root = path.resolve(__dirname, '../font')
        let arr = [];
        fileDisplay(root, arr);
        ctx.body = {
            code: 200,
            message: '獲取成功',
            data: arr,
        };
    }

文件列表

接口返回示例

注： 接口怎麼做這個不一定用node寫，可以php、python等，主要是遍歷出ttf字體文件的列表

接下來是vue實現更換字體
data數據

data() {
      return {
        font: [], // 字體列表json
        fontfamily: '', // 當前選中的字體value
        choose: {} // 當前選中的字體對象
      }
    },

axios接口

fetchList().then(response => {
            console.log(response)
            this.font = response.data
          })

目的是請求我們做好的字體json接口，把數據保存到this.font當中
html

<el-select v-model="fontfamily" filterable placeholder="請選擇" @change="handleChage">
          <el-option
            v-for="item in font"
            :key="item.path"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>

handleChange methods函數

handleChage(value) {
        for (let i in this.font) {
          if (this.font[i].name === value) {
            this.choose = this.font[i]
            this.createStyle(this.choose)
            this.canvas.layers[this.type.index]['font-family'] = this.choose.name // 修改文字對象的字體value
            this.canvas.layers[this.type.index].text.font.name = this.choose.name // 修改文字對象的字體value
            this.$store.commit('setCanvas',this.canvas) // store commit提交當前字體的修改
          }
        }
      }, 

createStyle methods 函數 將字體font-face css添加到head 使其生效

createStyle(data) {
        if (document.getElementById(data.name) === null) {
          let dom = document.createElement('style')
          dom.innerHTML = `
          @font-face{
              font-family: '${data.name}';
              src : url('${data.path}');
          }
        `
          dom.setAttribute('id', data.name)
          document.querySelector('head').append(dom)
        }
      }

關於綁定css data 如： {width:‘200px’}

<div :style="[data]"></div>

如果有什麼問題建議 可以私信我,本人小白一個。

文章轉載自 原文地址