• 使用psd.js

npm install psd.js --save  //注意浏览器要使用psd.js 
//导入
import PSD from 'psd.js'
async getPsdData (url) {
    const psd = await PSD.fromURL(url)
    const psd_list = psd.tree().children()
    let layer_object = {}
    psd_list.forEach(layer => {
         const parent = layer.parent.export()
         layer_object = layer.export()
         layer_object.type = 'text-group'
         //获取psd容器的宽高
         layer_object.document = {
            width: parent.document.width,
            height: parent.document.height,
            top: 0,
            left: 0
          }
          //获取文字容器的宽高
          layer_object.style = {
            width: layer_object.width,
            height: layer_object.height,
            top: 0,
            left: 0
          }
          if (layer._children.length > 0) {
            layer_object.children = []
            layer._children.forEach(child => {
              const typeTool = child.get('typeTool'); //获取psd文字属性
              const layer_children = child.export() //导出
              if (typeTool) {
                layer_children.tracking = typeTool.styles().Tracking  //后续用于计算 letterSpacing
                layer_object.children.push(layer_children)
              }
            })
          }
        })
        console.log(layer_object)
        this.formatLayer(layer_object)) //进一步格式化数据
      },
formatLayer (layer_object) {
        const children = layer_object.children;
        const layer = {
          name: layer_object.name,
          style: layer_object.document,
          group_style: layer_object.style,
          type: layer_object.type,
          children: []
        }
        children.forEach(child => {
          let letterSpacing = ''
          if (child.tracking) {
            letterSpacing = child.tracking[0] * this.computeFontSize(child.text) / 1000 + 'px'
          }
          const child_layer = {
            value: child.text.value,
            style: {
              width: child.width,
              height: child.height,
              top: child.top,
              left: child.left,
              letterSpacing: letterSpacing,
              lineHeight: (child.text.font.leading[0] / child.text.font.sizes[0]).toFixed(2),
              // transform:computeFontTransform(transform),
              textAlign: child.text.font.alignment[0],
              color: `rgb(${child.text.font.colors[0]})`,
              fontSize: this.computeFontSize(child.text),
              fontStyle: child.text.font.styles[0],
              fontWeight: child.text.font.weights[0],
              textDecoration: child.text.font.textDecoration[0],
              fontFamily: child.text.font.names.join(","),
            }
          }
          layer.children.push(child_layer)
        })
        // console.log(layer)
        this.$store.commit('addDrawComponent', layer)
        this.$store.commit('setDrawComponent', layer)
      },
 //计算字体大小
computeFontSize (item) {
        const sizes = item.font.sizes
        let size = 24;
        if (sizes[0]) {
          if (item.transform.yy !== 1) {
            size = Math.round((sizes[0] * item.transform.yy) * 100) * 0.01;
          } else { // transform.yy为1时，sizes[0]的值就是字体显示大小的值，不需要计算
            size = sizes[0];
          }
        }
        return size
      },

格式化之前数据

格式化之后的数据

渲染结果