javascript - 来自 SharePoint 的数据被拉入 HTML 表格,然后被导出为 word,表格未完全显示
问题描述
我有两个链接:
1) https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/
我将 SharePoint 列表数据拉入 html 表
下面是代码,但我无法在横向模式下打开单词,或者表格显示不正确。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>
<style>
#btn-export {
background: #484848;
color: #FFF;
border: #000 1px solid;
padding: 10px 20px;
font-size: 12px;
border-radius: 3px;
}
.content-footer {
text-align: center;
}
.source-html-outer1 {
border: #d0d0d0 1px solid;
border-radius: 3px;
padding: 10px 20px 20px 20px;
}
.Section2 td,
.Section2 th {
border: 1px solid;
}
@page source-html-outer {
size: 841.7pt 595.45pt;
mso-page-orientation: landscape;
margin: 1.25in 1.0in 1.25in 1.0in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.source-html-outer {
@page: source-html-outer;
}
@page Section2 {size:841.7pt 595.45pt;mso-page-orientation:landscape;margin:1.25in 1.0in 1.25in 1.0in;mso-header-margin:.5in;mso-footer-margin:.5in;mso-paper-source:0;}
div.Section2 {@page:Section2;}
</style>
</head>
<body>
<div class="Section2">
<div id="source-html-outer" class="source-html-outer">
<table style="border:1px solid black ; display: table-caption;" class="table">
<thead>
<tr>
<th scope="col">Requirement Name</th>
<th scope="col">Document Description</th>
<th scope="col">Documentation Link</th>
<th scope="col">Evidence Gap</th>
<th scope="col">Evidence Gap Status</th>
<th scope="col">Evidence Gap Status Update</th>
</tr>
</thead>
<tbody id="tbodyawards">
</tbody>
</table>
</div>
</div>
<div class="content-footer">
<button id="btn-export" type="button" onclick="return exportHTML();">Export to word
doc</button>
</div>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
$(document).ready(function () {
var id = getParameterByName("ID");
getMyListData(id);
})
function getMyListData(id) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Evidence-Gap')/items?$select=*,ParentRequirement/Id," +
"ParentRequirement/Title&$expand=ParentRequirement&$filter=ParentRequirement/Id eq " + id
$.ajax({
url: url
,
method: "GET", headers: { "accept": "application/json;odata=verbose", }, success: function (data) {
var
restResults = data.d.results; for (var i = 0; i < restResults.length; i++) {
$('#tbodyawards').append('<tr><td width="30px">' + restResults[i].ParentRequirement.Title + '</td>' +
'<td style="width:auto">' + restResults[i].Title + '</td>' +
'<td style="width:auto"><a href="' + restResults[i].Documentationlink.Url + '">' + restResults[i].Documentationlink.Description + '</a></td>' +
'<td style="width:auto">' + restResults[i].EvidenceGap0 + '</td>' +
'<td style="width:auto">' + restResults[i].EvidenceGap + '</td>' +
'<td style="width:40px">' + restResults[i].EvidenceGapStatusUpdate + '</td></tr>');
}
},
error: function (sender, args) {
console.log('test');
}
});
};
function exportHTML() {
var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
"xmlns:w='urn:schemas-microsoft-com:office:word' " +
"xmlns='http://www.w3.org/TR/REC-html40'>" +
"<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title>" +
"<style> @page Section2 {size:841.7pt 595.45pt;mso-page-orientation:landscape;margin:1.25in 1.0in 1.25in 1.0in;mso-header-margin:.5in;mso-footer-margin:.5in;mso-paper-source:0;}" +
"div.Section2 {page:Section2;}"+
"</style>" +
"</head><body>";
var footer = "</body></html>";
var sourceHTML = header + document.getElementById("source-html-outer").innerHTML + footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
return false;
}
</script>
</body>
</html>
解决方案
修改代码如下。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>
<style>
#btn-export {
background: #484848;
color: #FFF;
border: #000 1px solid;
padding: 10px 20px;
font-size: 12px;
border-radius: 3px;
}
.content-footer {
text-align: center;
}
.source-html-outer1 {
border: #d0d0d0 1px solid;
border-radius: 3px;
padding: 10px 20px 20px 20px;
}
.Section2 td,
.Section2 th {
border: 1px solid;
}
@page source-html-outer {
size: 841.7pt 595.45pt;
mso-page-orientation: landscape;
margin: 1.25in 1.0in 1.25in 1.0in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.source-html-outer {
@page: source-html-outer;
}
}
@page Section2 {size:841.7pt 595.45pt;mso-page-orientation:landscape;margin:1.25in 1.0in 1.25in 1.0in;mso-header-margin:.5in;mso-footer-margin:.5in;mso-paper-source:0;}
div.Section2 {@page:Section2;}
</style>
</head>
<body>
<div class="Section2">
<div id="source-html-outer" class="source-html-outer" style="width:800px;">
<table style="border:1px solid black ; display: table-caption; table-layout: fixed;" class="table" >
<thead>
<tr>
<th scope="col">Requirement Name</th>
<th scope="col">Document Description</th>
<th scope="col">Documentation Link</th>
<th scope="col">Evidence Gap</th>
<th scope="col">Evidence Gap Status</th>
<th scope="col">Evidence Gap Status Update</th>
</tr>
</thead>
<tbody id="tbodyawards">
</tbody>
</table>
</div>
</div>
<div class="content-footer">
<button id="btn-export" type="button" onclick="return exportHTML();">Export to word
doc</button>
</div>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
$(document).ready(function () {
var id = getParameterByName("ID");
getMyListData(id);
})
function getMyListData(id) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Evidence-Gap')/items?$select=*,ParentRequirement/Id," +
"ParentRequirement/Title&$expand=ParentRequirement&$filter=ParentRequirement/Id eq " + id
$.ajax({
url: url
,
method: "GET", headers: { "accept": "application/json;odata=verbose", }, success: function (data) {
var
restResults = data.d.results; for (var i = 0; i < restResults.length; i++) {
$('#tbodyawards').append('<tr><td width="30px">' + restResults[i].ParentRequirement.Title + '</td>' +
'<td style="width:auto">' + restResults[i].Title + '</td>' +
'<td style="width:auto"><a href="' + restResults[i].Documentationlink.Url + '">' + restResults[i].Documentationlink.Description + '</a></td>' +
'<td style="width:auto">' + restResults[i].EvidenceGap0 + '</td>' +
'<td style="width:auto">' + restResults[i].EvidenceGap + '</td>' +
'<td style="width:40px;word-break: break-all;">' + restResults[i].EvidenceGapStatusUpdate + '</td></tr>');
}
},
error: function (sender, args) {
console.log('test');
}
});
};
function exportHTML() {
var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
"xmlns:w='urn:schemas-microsoft-com:office:word' " +
"xmlns='http://www.w3.org/TR/REC-html40'>" +
"<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title>" +
"<style> @page Section2 {size:841.7pt 595.45pt;mso-page-orientation:landscape;margin:1.25in 1.0in 1.25in 1.0in;mso-header-margin:.5in;mso-footer-margin:.5in;mso-paper-source:0;}" +
"div.Section2 {page:Section2;}"+
"</style>" +
"</head><body>";
var footer = "</body></html>";
var sourceHTML = header + document.getElementById("source-html-outer").innerHTML + footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
return false;
}
</script>
</body>
</html>
推荐阅读
- php - 将字体颜色“获取行”设置为红色
- sql - Oracle查询在同一张表中查找一对多关系
- javascript - 有没有办法在执行命令时获取所有可用的参数?(Discord.js v12)
- python - Keras 评估生成器
- karate - 在不同的环境和每个特定的 url 上运行空手道测试
- python-3.x - 使用 pytest 每个参数运行一次所有测试
- azure - 有没有办法使用 powershell 升级 azure app 服务计划?
- sql - Linq to Entities 相当于 T-SQL 中的过滤内联视图
- spring-mvc - 在 Springdoc 中表示表单数据和返回字节数组的问题
- xamarin.forms - 在 Xamarin 中,使用 Navigation.RemovePage() 时如何避免内存泄漏