满口金牙 2022-04-26 14:46 采纳率: 91.5%
浏览 193
已结题

基于vue3 合同模板 中的变量问题

想做可以自定义的 文档的 模板。 一些文字是固定的，一些文字是可变的 ，比如合同 中的 甲方 是变量，日期是变量
请教一下有什么好思路，或现成的 方案

目前的思路是，
文档模板 以json对象保存在 数据库

doc={
      title:[  //可能存在多个标题,以数组形式
        {
          text:'', //内容
          head:'',  // 文档编号
          img:'',  // 图片
          font_size:'', //字体
          font_family:'',
          font_weight:'',
          letter_spacing: '',
          text_decoration:''
        },
      ],
      content:[  //每段文字一个对象
        {
          text:'', //内容
        },
      ],
      
    }
 问题如下:
1,怎么设置 文档中,某些 句子的变量,
2,  一段句子中, 部分字体 格式 怎么设置
  • 写回答

4条回答 默认 最新

  • web修理工 2022-04-26 18:52
    关注

    这是一个Excel生成案例 你可以根据这个自定义样式

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .tableA {
            border-collapse: collapse;
            color: #f00
        }

        .tableA .title th {
            height: 50px;
            font-size: 24px;
            font-family: '微软雅黑';
            font-weight: 700;
        }

        .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
        }

        .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
        }

        .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <table bordercolor="black" class="tableA">
        <tr class="title">
            <th colspan="4">学生信息</th>
        </tr>
        <tr>
            <th>名字</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>19</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>小黄</td>
            <td>男</td>
            <td>20</td>
            <td>2班</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>男</td>
            <td>29</td>
            <td>3班</td>
        </tr>
        <tr class="footer">
            <td colspan="4">总人数：3人</td>
        </tr>
    </table>
    <button onclick="deriveAble()">导出表单</button>
    <script>
        var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
      
        function deriveAble() {
            var excelHtml = `
    <html>
      <head>
        <meta charset='utf-8' />
        <style>
          .tableA {
            border-collapse: collapse;
          }
          .tableA .title th{
            height: 50px;
            font-size: 24px;
            font-family: '微软雅黑';
            font-weight: 700;
          }
          .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
          }
          .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
          }
          .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
          }
        </style>
      </head>
      <body>
        ${oHtml}
      </body>
    </html>
  `
            var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' })
            // 创建一个a标签
            var oA = document.createElement('a');
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            oA.href = URL.createObjectURL(excelBlob);
            // 给文件命名
            oA.download = '学生名单.xls';
            // 模拟点击
            oA.click();

        }

    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 5月7日
  • 已采纳回答 4月29日
  • 创建了问题 4月26日

悬赏问题

  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：