Skip to content

增加导入解析功能 (Run ID: coffeedeveloper_exportjs_issue_2_cd3e2ccc) #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

增加导入解析功能 (Run ID: coffeedeveloper_exportjs_issue_2_cd3e2ccc) #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,37 @@ Safari、Firefox、Chrome新版均能够支持。
npm install exportjs
```

## 使用方式

### 传统方式 (UMD)
可以通过script标签直接引入:

```html
<script src="path/to/exportjs.js"></script>
<script>
ExportJS.toCSV({
// options...
});
</script>
```

### ES6 模块方式
现在支持ES6模块导入，可以只导入需要的函数:

```javascript
// 导入整个库
import ExportJS from 'exportjs';
ExportJS.toCSV({
// options...
});

// 或者只导入需要的函数
import { toCSV, support } from 'exportjs';
toCSV({
// options...
});
```

## API

### toCSV
Expand Down Expand Up @@ -63,4 +94,4 @@ ExportJS.toCSV({

##### 导出效果预览

![exportjs-mac](http://oap12gnk8.bkt.clouddn.com/exportjs-mac.png)
![exportjs-mac](http://oap12gnk8.bkt.clouddn.com/exportjs-mac.png)
15 changes: 10 additions & 5 deletions lib/exportjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ExportJS = factory());
}(this, (function () { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.ExportJS = global.ExportJS || {})));
}(this, (function (exports) { 'use strict';

var defaults = {
mime: 'text/csv,charset=UTF-8',
Expand Down Expand Up @@ -100,11 +100,16 @@ var support = function () {
return true;
};

// Keep the default export for backward compatibility
var index = {
toCSV: toCSV,
support: support,
};

return index;
exports.toCSV = toCSV;
exports.support = support;
exports['default'] = index;

Object.defineProperty(exports, '__esModule', { value: true });

})));
14 changes: 14 additions & 0 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Re-export from exportjs.js
import ExportJS from './exportjs.js';

// Export the default object as a global variable for browser usage
if (typeof window !== 'undefined') {
window.ExportJS = ExportJS;
}

// Export individual functions for ES6 module imports
export const toCSV = ExportJS.toCSV;
export const support = ExportJS.support;

// Export the default object for CommonJS and AMD
export default ExportJS;
6 changes: 5 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,11 @@ const support = () => {
return true;
};

// Export individual functions as named exports
export { toCSV, support };

// Keep the default export for backward compatibility
export default {
toCSV,
support,
};
};
51 changes: 43 additions & 8 deletions test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,60 @@
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="wap-font-scale" content="no">
<title></title>
<title>ExportJS Test</title>
</head>
<body>
<button>点击下载</button>
<script type="text/javascript" src="../lib/index.js"></script>
<h1>ExportJS Test</h1>
<p>This page demonstrates both ways of using the ExportJS library:</p>
<ol>
<li>Using the global ExportJS object (traditional way)</li>
<li>Using ES6 module imports (new way)</li>
</ol>

<h2>Traditional Way</h2>
<button id="traditional">Download CSV (Traditional)</button>

<h2>ES6 Module Way</h2>
<button id="module">Download CSV (ES6 Module)</button>

<!-- Load the library using the traditional way -->
<script type="text/javascript" src="../lib/exportjs.js"></script>

<!-- Traditional way usage -->
<script type="text/javascript">
document.querySelector('button').addEventListener('click', function(e) {
document.querySelector('#traditional').addEventListener('click', function(e) {
ExportJS.toCSV({
columns: [
{ title: 'ID', key: 'id' },
{ title: '名称', key: 'name' },
{ title: '网址', key: 'url' },
],
data: [
{ id: 1, url: 'http://qq.com' },
{ id: 2, url: 'http://163.com' },
{ id: 1, name: 'QQ', url: 'http://qq.com' },
{ id: 2, name: '163', url: 'http://163.com' },
]
})
});
});
</script>

<!-- ES6 Module way usage -->
<script type="module">
// Import only the toCSV function
import { toCSV } from '../lib/index.js';

document.querySelector('#module').addEventListener('click', function(e) {
toCSV({
columns: [
{ title: 'ID', key: 'id' },
{ title: '名称', key: 'name' },
{ title: '网址', key: 'url' },
],
data: [
{ id: 1, name: 'QQ', url: 'http://qq.com' },
{ id: 2, name: '163', url: 'http://163.com' },
]
});
});
</script>
</body>
</html>
</html>