Comments (6)
下个版本增加自动获取带样式的 dom 方法
#4
from js-xxx.
我这边测试是导出有样式的,方便提供下您的代码案例吗?
from js-xxx.
<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>带样式的 excel 表格导出 demo</title>
<script src="https://pandaoh.github.io/js-xxx/html/js-xxx.min.js"></script>
</head>
<body>
<div id="table-export-demo">
<h1 style="color: red">九九乘法表</h1>
<table style="border: 2px solid blue">
<tbody id="multiplicationTable"></tbody>
</table>
<script>
var table = document.getElementById('multiplicationTable');
for (var i = 1; i <= 9; i++) {
var row = document.createElement('tr');
row.style.border = '1px solid green';
table.appendChild(row);
for (var j = 1; j <= 9; j++) {
var cell = document.createElement('td');
cell.style.border = '1px solid green';
if (i === j) {
if ((i * j) % 3 === 0) {
cell.className = 'equals triple';
} else {
cell.className = 'equals';
}
} else if ((i * j) % 3 === 0) {
cell.className = 'triple';
}
cell.textContent = i + '×' + j + '=' + i * j;
row.appendChild(cell);
}
}
setTimeout(function () {
const { exportFile } = $xxx;
exportFile(
document.getElementById('table-export-demo').outerHTML,
`excelTableWithStyle-${new Date().getTime()}`,
'xls'
);
}, 0);
</script>
</div>
</body>
</html>
您好,这是我编写的一个按样式导出的 demo,您可以参考一下,建议如下:
- 样式需些行内样式,因为导出的是 dom 元素,并没有包含类样式这些。
- 最好用一个大的 div 包起需要导出的部分。
- 如果需要导出类样式,可以参考
js-xxx
的printDom
方法。
from js-xxx.
https://codepen.io/adaer/pen/rNbdvLv
我了解了,需要把样式都注入到标签内联样式中,不然下载的表格是没有样式,
from js-xxx.
是的,后续我会优化这个问题,参考 printDom 方法。
https://github.com/pandaoh/js-xxx/blob/main/src/Dom/index.ts#L972
https://codepen.io/adaer/pen/rNbdvLv 我了解了,需要把样式都注入到标签内联样式中,不然下载的表格是没有样式,
from js-xxx.
教程参考:https://juejin.cn/post/7358450927115354146
from js-xxx.
Related Issues (14)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-xxx.