---
title: "Vue 集成"
description: "在 WebBuilder 页面中引入 Vue 2 及处理 Base64 文件下载。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue 集成

WebBuilder 中使用 Vue。

## vue2 使用样例

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

```javascript
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));
  }
});
```
``` html
<div itemId = "tableCntrAccouted"></div>
```
***viewport 中执行 app.init();***


## base64传到前端下载
``` javascript
          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);
```
``` javascript
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;
    }
  },
```

Source: https://ag.879818327.xyz/webbuilder/vue/index.mdx