vue 中html 转word 遇到的坑记录

发布于:2024-07-01 ⋅ 阅读:(11) ⋅ 点赞:(0)

1.单选框的展示

<span style="font-family: 'Wingdings';font-size: 12pt;">
	{{ items.cellValue == i ? "¤" : "¡" }}
</span>

2.多选框的展示

<span style=" font-family: 宋体">
	{{items.selRadio.includes(index) ? "☑" : "□"}}
</span>

3.一行多段:需要对数据经行处理,一行展示的用p标签,一行展示多段的需要放在一起生成数组用table标签来展示

 <table style="
            border-color: #fff;
            border-collapse: collapse;
            font-family: Arial, SourceHanSansCN, Microsoft 		YaHei;
            color: #303133;
          "
          width="100%"
          border="0"
        >
          <tbody>
            <tr style="border-style: hidden; border-color: #fff">
               <td
                :style="handleWidth(items, idx)"
                v-for="(items, idxs) in item"
                :key="idxs"
              >
			</td>
            </tr>
          </tbody>
        </table>

handleWidth(item) {
      let textAlign = "";
      switch (item.cellSort) {
        case "start":
          textAlign = "left";
          break;
        case "end":
          textAlign = "right";
          break;
        case "center":
          textAlign = "center";
          break;
      }

      return {
        width: item.cellProportion + "%",
        "text-align": textAlign,
        "border-style": "hidden",
        "border-color": "#fff",
        padding: "0 0 14pt 0",
      };
    },

4.一段文字用p标签,但是word中的p标签的上边距会和上一个的下边距重合 写成下方的样式才生效,word中p标签的上下间距使用margin表示的

margin-top:14.0000pt; //根据展示效果来控制上间距是0还是14.0000
margin-botton:14.0000pt;

网站公告

今日签到

点亮在社区的每一天
去签到