关于外部 JS 文件在 dataviewjs 中的引入问题

遇到的问题

我使用了 Docker 版的 go-file: 基于 Go 的文件分享工具 以解决 Win 和 MacOS 上读取文件语法不一致的问题,例如我可以像这样读取Json文件const geoJson = await request('http://192.168.124.9:3000/upload/geo_demo/HK.json');

但是我在尝试了一些方法后仍旧无法导入外部服务器上的 JS 文件

  • 报错一:显示跨域问题,但我不知道如何解决
    • has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • 报错二:不显示图表,但是似乎已经加载

已尝试的解决方案

正常的引入

错误一:

Evaluation Error: TypeError: Failed to fetch dynamically imported module: http://192.168.124.9:3000/upload/npmJS/[email protected]

错误二:

const echartsMin = await request("http://192.168.124.9:3000/upload/npmJS/[email protected]");

// 使用 eval 执行返回的脚本
eval(echartsMin); // 动态加载 echarts

// 检查是否成功加载
if (typeof echarts !== 'undefined') {
    console.log('ECharts loaded successfully');
} else {
    console.error('Failed to load ECharts');
}

无显示

尝试三:

const {echartsJS} = await request('http://192.168.124.9:3000/upload/npmJS/[email protected]');
import echarts from echartsJS;

尝试四:

const fs = require('fs');
const path = require('path');

const filePath = path.join(this.app.vault.adapter.basePath, 'npmJS', '[email protected]'); // 本地文件路径

if (fs.existsSync(filePath)) {
    const libraryCode = fs.readFileSync(filePath, 'utf-8');
    eval(libraryCode); // 动态加载并执行 JS 文件
    console.log('Local JS library loaded successfully!');
} else {
    console.error('Library file not found');
}

尝试五:

const loadECharts = async () => {
    if (typeof echarts === 'undefined') {
        const script = document.createElement('script');
        script.src = 'http://192.168.124.9:3000/upload/npmJS/[email protected]';
        script.type = 'text/javascript';
        document.head.appendChild(script);

        await new Promise((resolve) => {
            script.onload = resolve;
        });
    }
};

await loadECharts();
console.log('ECharts is loaded:', typeof echarts !== 'undefined');

尝试六:

await dv.view('http://192.168.124.9:3000/upload/npmJS/[email protected]',{echarts});

尝试了很多不懂的解决方法,属于是乱投医的感觉了。
希望得到各位大佬的帮助

没导过包,但是有人弄过几个,可以看一下里面有没有解决你问题的方法。

哦,本来想再放几个介绍的,结果发现楼主不就是之前问过 Dataview 结合 echart.js 问题的那个吗。那另外的介绍楼主应该也看过了,估计也不用了。

感谢您的回复,但是我对这部分代码并不熟悉,似乎无法套用他的代码,因为这好像一部分节选;

不过我在其他帖子中看到这位大佬的其他回复,从我的理解是使用 fs.readFileSync(filePath, 'utf-8'); 但是并没有成功

我在翻阅资料的时候找到了 Displaying Locally Saved 3D models in Obsidian Notes - Share & showcase - Obsidian Forum 这篇文章,其中的代码似乎可行,但是似乎由于一些缓存问题,我有点不清楚这个代码是否正确了


runEchartsJs()

// Function to load external scripts
function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    script.onerror = () => console.error(`Failed to load script: ${url}`);
    document.head.appendChild(script);
}

function runEchartsJs() {
    // Load echarts.js, GLTFLoader and Orbitcontrols from the correct CDN
    loadScript('http://192.168.124.9:3000/upload/npmJS/[email protected]', () => {
        console.log('echarts.js loaded');
    }, undefined, (error) => {
        console.error('An error happened while loading the echarts.js package', error);
    });
}