依赖资源加载

设计器内部依赖了多个第三方库，如 ECharts、XLSX、HTML2Canvas 等。当这些依赖需要从不同的 CDN 源加载或使用本地文件时，可以通过 loadjs.depend 方法来自定义依赖的加载路径。

重要提示

使用 loadjs.depend 可以完全替换内置的依赖加载链接，支持自定义 CDN 源、本地文件路径或私有仓库地址。

内置依赖列表

FormCreate 设计器默认包含以下依赖：

javascript

// 内置依赖配置
{
    xlsx: 'https://unpkg.com/xlsx@0.18.5/dist/xlsx.full.min.js',
    mammoth: 'https://unpkg.com/mammoth@1.7.1/mammoth.browser.min.js',
    echarts: 'https://unpkg.com/echarts@5.6.0/dist/echarts.min.js',
    mermaid: 'https://unpkg.com/mermaid@11.12.2/dist/mermaid.min.js',
    mpegts: 'https://unpkg.com/mpegts.js@1.8.0/dist/mpegts.js',
    html2canvas: 'https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js',
    jspdf: 'https://unpkg.com/jspdf@3.0.1/dist/jspdf.umd.js'
}

版本固定建议

为了确保最佳兼容性，建议在自定义依赖源时使用以下固定版本：

XLSX: 0.18.5
Mammoth: 1.7.1
ECharts: 5.6.0
Mermaid: 11.12.2
MPEGTS.js: 1.8.0
HTML2Canvas: 1.4.1
jsPDF: 3.0.1

加载已配置的依赖

使用 loadjs.loadDepend() 方法可以加载通过 loadjs.depend() 配置的依赖。该方法会自动从配置的路径加载依赖，并返回 Promise。

基本用法

javascript

import { loadjs } from 'path/to/fcDesignerPro';

// 加载单个依赖
loadjs.loadDepend('echarts').then(() => {
    console.log('ECharts 加载成功');
    // 使用 ECharts
    if (window.echarts) {
        const chart = window.echarts.init(document.getElementById('chart'));
    }
}).catch(() => {
    console.error('ECharts 加载失败');
});

// 加载多个依赖
loadjs.loadDepend(['echarts', 'xlsx']).then(() => {
    console.log('所有依赖加载成功');
});

在动态组件中使用

vue

<script>
export default {
  props: {
    formCreateInject: Object
  },
  methods: {
    async loadECharts() {
      const loadjs = this.formCreateInject.form.loadjs;

      try {
        await loadjs.loadDepend('echarts');
        console.log('ECharts 已加载');

        // 使用 ECharts
        if (window.echarts) {
          const chart = window.echarts.init(this.$refs.chartContainer);
          chart.setOption({ /* ... */ });
        }
      } catch (error) {
        console.error('加载失败:', error);
      }
    }
  }
}
</script>

配置依赖路径

替换单个依赖

javascript

import { loadjs } from 'path/to/fcDesignerPro';
// 替换 ECharts 依赖为自定义 CDN
loadjs.depend('echarts', 'https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js');
// 使用本地文件
loadjs.depend('xlsx', '/static/libs/xlsx.full.min.js');
// 使用私有 CDN
loadjs.depend('html2canvas', 'https://your-cdn.com/html2canvas@1.4.1/dist/html2canvas.min.js');

批量替换依赖

javascript

import { loadjs } from 'path/to/fcDesignerPro';
// 批量替换多个依赖
loadjs.depend({
    echarts: 'https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js',
    xlsx: '/static/libs/xlsx.full.min.js',
    html2canvas: 'https://your-cdn.com/html2canvas@1.4.1/dist/html2canvas.min.js',
    jspdf: '/static/libs/jspdf.umd.js'
});

手动挂载依赖

当第三方库已经通过其他方式加载到 window 对象时，可以使用 loadjs.done 方法手动标记依赖为已加载状态：

javascript

import { loadjs } from 'path/to/fcDesignerPro';
import XLSX from 'xlsx';
// 检查并手动标记已加载的依赖
window.XLSX = XLSX
loadjs.done('xlsx');

if (window.echarts) {
    loadjs.done('echarts');
}

loadjs 方法

loadjs() 是核心的加载方法，用于直接加载 JavaScript、CSS 或图片文件。该方法支持多种调用方式，可以灵活地加载外部资源。

基本用法

1. 加载单个文件（回调方式）：

javascript

import { loadjs } from 'path/to/fcDesignerPro';

// 加载 JavaScript 文件
loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
    success: function() {
        console.log('文件加载成功');
        // 使用加载的库
        if (window._) {
            console.log('Lodash 已可用');
        }
    },
    error: function(pathsNotFound) {
        console.error('文件加载失败:', pathsNotFound);
    }
});

2. 加载多个文件：

javascript

// 同时加载多个文件
loadjs([
    'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
    'https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js'
], {
    success: function() {
        console.log('所有文件加载成功');
    },
    error: function(pathsNotFound) {
        console.error('部分文件加载失败:', pathsNotFound);
    }
});

3. 使用 Promise（推荐）：

javascript

// 设置 returnPromise: true 返回 Promise
loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
    returnPromise: true
}).then(() => {
    console.log('文件加载成功');
    // 使用加载的库
}).catch((pathsNotFound) => {
    console.error('文件加载失败:', pathsNotFound);
});

4. 加载 CSS 文件：

javascript

// 自动识别 .css 后缀或使用 css! 前缀
loadjs('https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css', {
    returnPromise: true
}).then(() => {
    console.log('CSS 文件加载成功');
});

// 或使用 css! 前缀
loadjs('css!https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css');

5. 注册为 Bundle（便于后续使用）：

javascript

// 加载文件并注册为 bundle，后续可以通过 loadjs.ready() 等待
loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', 'lodash', {
    success: function() {
        console.log('Lodash bundle 已加载');
    }
});

// 在其他地方等待 bundle 加载完成
loadjs.ready('lodash', {
    success: function() {
        console.log('Lodash 可以使用了');
    }
});

高级选项

重试机制：

javascript

loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
    returnPromise: true,
    numRetries: 3  // 失败后重试 3 次
}).then(() => {
    console.log('加载成功');
}).catch(() => {
    console.error('加载失败，已重试 3 次');
});

异步控制：

javascript

loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
    async: false  // 同步加载（不推荐，会阻塞页面）
});

加载前回调：

javascript

loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
    before: function(path, element) {
        // 在添加到 DOM 之前执行
        console.log('准备加载:', path);
        // 可以修改 element 属性
        // 返回 false 可以阻止加载
        return true;
    },
    success: function() {
        console.log('加载成功');
    }
});

在动态组件中使用

在动态组件中，可以通过 formCreateInject.form.loadjs 访问 loadjs 方法：

vue

<script>
export default {
  props: {
    formCreateInject: Object
  },
  methods: {
    async loadLibrary() {
      const loadjs = this.formCreateInject.form.loadjs;

      // 使用 Promise 方式加载
      try {
        await loadjs('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', {
          returnPromise: true
        });
        console.log('Lodash 加载成功');

        // 使用加载的库
        if (window._) {
          const result = window._.chunk([1, 2, 3, 4, 5], 2);
          console.log('结果:', result);
        }
      } catch (error) {
        console.error('加载失败:', error);
      }
    }
  }
}
</script>

方法参数说明

参数	类型	说明
paths	`string \| string[]`	要加载的文件路径，可以是单个路径或路径数组
bundleId	`string`	（可选）Bundle ID，用于后续通过 `loadjs.ready()` 等待
options	`object`	（可选）配置选项

options 配置项：

选项	类型	默认值	说明
success	`function`	-	加载成功回调函数
error	`function`	-	加载失败回调函数
returnPromise	`boolean`	`false`	是否返回 Promise
numRetries	`number`	`0`	失败后重试次数
async	`boolean`	`true`	是否异步加载
before	`function`	-	加载前回调函数，返回 `false` 可阻止加载

通过这些配置，您可以完全控制 FormCreate 设计器的依赖加载行为，适应不同的部署环境和网络条件。

Element UI版本

Ant Design Vue版本

依赖资源加载

内置依赖列表

加载已配置的依赖

基本用法

在动态组件中使用

配置依赖路径

替换单个依赖

批量替换依赖

手动挂载依赖

loadjs 方法

基本用法

高级选项

在动态组件中使用

方法参数说明

依赖资源加载 ​

内置依赖列表 ​

加载已配置的依赖 ​

基本用法 ​

在动态组件中使用 ​

配置依赖路径 ​

替换单个依赖 ​

批量替换依赖 ​

手动挂载依赖 ​

loadjs 方法 ​

基本用法 ​

高级选项 ​

在动态组件中使用 ​

方法参数说明 ​

依赖资源加载

内置依赖列表

加载已配置的依赖

基本用法

在动态组件中使用

配置依赖路径

替换单个依赖

批量替换依赖

手动挂载依赖

loadjs 方法

基本用法

高级选项

在动态组件中使用

方法参数说明