来自 SharePoint 的数据被拉入 HTML 表，然后被导出到 word，该表未完全显示
[英]Data from SharePoint is being pulled into a HTML table and then its being exported to word, the table is not displaying fully
问题描述
I have two links:
我有两个链接：
1) https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/ 1) https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/
2) HTML to landscape MS Word 2) HTML 到横向 MS Word
I am pulling SharePoint list data into a html table我将 SharePoint 列表数据拉入 html 表
Below is the code, but I'm not able to open the word in landscape mode or the table is not displaying properly.下面是代码，但我无法在横向模式下打开单词，或者表格显示不正确。
<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>1 个解决方案
解决方案1
0 2019-10-30 09:49:20
Modify the code as below.修改代码如下。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
从内部 html 中提取表行中的 URL 数据，试图弄清楚如何让它在单击时在新选项卡中打开 URL - Url data in table row being pulled from Inner html, trying to figure out how to make it open the URL in a new Tab on click
无法将隐藏的表格列排除在导出到 CSV 之外？ - Cannot exclude hidden table columns from being exported to CSV?
AngularJS; html表格中未列出模型数据 - AngularJS; Model data not being listed in an html table
从json文件导入表格数据时，将“模式”按钮添加到html表格行 - Modal button added to html table rows, while table data is being imported in from json file
为从SQL数据库中提取的数据添加换行符 - Add line breaks to data being pulled from SQL database
显示从会话到HTML表的数组数据 - Displaying array data from session to html table
显示动态 HTML 表中的数据 - Displaying Data From Dynamic HTML Table
将来自 firestore 的数据显示到 HTML 表中 - Displaying data from firestore into HTML table
使用服务调用从共享点列表数据中获取数据并显示在html表中，一切正常，但一个javascript失败 - Using service call getting data from sharepoint list data and displaying in html table, everything is working but one javascript is failing
vuejs 的表格中无法识别数据 - Data is not being recognized in table in vuejs
相关标签