项目中有用到某企业的低代码平台,需求是在表单中一个字段上面增加一个可以下载文件的按钮,,这个低代码表单可以插入js脚本。

实现逻辑是,找到要在哪个字段上增加按钮,找到这个元素的id后,使用document操作增加按钮,后端服务器拿到模板base编码,返回给前端blob对象解析,创建a标签,模拟点击,实现下载。

具体代码如下,可参考:

viewModel.on('afterLoadData', (args) => {
  const fileText = '附件1-科技项目申请书';
  const fileTexts = '附件2-科技项目预算书';
  const fileTextes = '附件3-公司科技项目专家评审意见表';
  const btnTpl = `<span>附件下载:</span>
    <button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btn">
      <span class="wui-button-text-wrap">
        <span class="lang-id-container">${fileText}</span><span>(模板)</span>
      </span>
    </button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btn2">
      <span class="wui-button-text-wrap">
        <span class="lang-id-container">${fileTexts}</span><span>(模板)</span>
      </span>
    </button>
  `;
  const btnTplfile = `<span>附件下载:</span>
    <button style="height: 17px; line-height: 1;" type="button" class="wui-button btnJointQuery mdf-button wui-button-text wui-button-default lx-btnfile">
      <span class="wui-button-text-wrap">
        <span class="lang-id-container">${fileTextes}</span><span>(模板)</span>
      </span>
    </button>
  `;
  
  setTimeout(() => {
    const filesDom = document.getElementById('stp_apply|attachments');
    const filesDomfile = document.getElementById('stp_apply|feedbackForm');
    
    const blockAccessoryLeft = filesDom.querySelector('.blockAccessoryLeft');
    const blockAccessoryLeftfile = filesDomfile.querySelector('.blockAccessoryLeft');
    var hasLxBtn = document.querySelectorAll('.lx-btn').length > 0;
    if(false == hasLxBtn){
    blockAccessoryLeft.insertAdjacentHTML('beforeend', btnTpl);
    }
    const btn = document.querySelector('.lx-btn');
    
    btn.addEventListener('click', () => {
      downloadFile(fileText);
    });
    
     const btn2 = document.querySelector('.lx-btn2');
    
    btn2.addEventListener('click', () => {
      downloadFile(fileTexts);
    });
    
      var hasLxBtnfile = document.querySelectorAll('.lx-btnfile').length > 0;
    if(false == hasLxBtnfile){
    blockAccessoryLeftfile.insertAdjacentHTML('beforeend', btnTplfile);
    }
    const btn3 = document.querySelector('.lx-btnfile');
    
    btn3.addEventListener('click', () => {
      downloadFile(fileTextes);
    });
  });
});

function downloadFile(spanText) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const responseText = xhr.responseText;
      let byteCharacters = atob(responseText);
      let byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], { type: 'application/octet-stream' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = `${spanText}.docx`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  };

  xhr.open('GET', `https://${window.location.host}/oa-appservice-be/donwloadTemplate/getTemplate?filename=${spanText}`);

  xhr.send();
}

更多推荐