Skip to content

Vue 集成

在 WebBuilder 页面中引入 Vue 2 及处理 Base64 文件下载。

Updated View as Markdown

WebBuilder 中使用 Vue。

vue2 使用样例

ide.xwl和home.xwl中引入vue.js element

Wb.apply(app, {
  /**
   * 初始化,渲染到panel设置的html模板中。
   */
  init: function() {
    var Main = {
      data: function() {
        return {
          //           筛选条件有:按月,按季度,按年,船公司(多选)、客户(多选)、数据来源(订舱、出运),业务类型,不显示加拼,计算单位(票数,箱量)
          search: {
            serviceType: "1",
            typeData: "1",
            dateRange: []
          },
          dialogTableVisible: false,
          tableColumn: tableColumn,
          tableData: []
        };
      },
      created: function() {
        this.init();
      },
      methods: {
        //...
      },
      computed: {
        //...
      }
    };
    var V = Vue.extend(Main);
    app.table = new V().$mount(app.tablepanel.el.down('[itemId=tableCntrAccouted]', true));
  }
});
<div itemId = "tableCntrAccouted"></div>

viewport 中执行 app.init();

base64传到前端下载

              var contentType = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64";//excel样例
              var b64Data = res.responseText;

              var blob = that.b64toBlob(b64Data, contentType);
              var blobUrl = URL.createObjectURL(blob);

              var link = document.createElement('a');
              link.href = blobUrl;
              link.download = "data.xlsx";
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              // 释放 URL.createObjectURL() 创建的 URL 对象
              window.URL.revokeObjectURL(link.href);
b64toBlob: function(b64Data, contentType, sliceSize) {
          contentType = contentType || '';
          sliceSize = sliceSize || 512;
          var byteCharacters = atob(decodeURIComponent(b64Data));
          var byteArrays = [];

          for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
          }

          var blob = new Blob(byteArrays, {
            type: contentType
          });
          return blob;
        }
      },
Navigation

Type to search…

↑↓ navigate↵ selectEsc close