Angular 2 IE document.execCommand（＆＃39; copy＆＃39;）应对表，td，td，不工作
我正在使用TypeScript处理Angular4 / HTML5应用程序。我有一张tr，td和th表。我正在复制到剪贴板，以便用户可以单击按钮复制到剪贴板并将其粘贴到Outlook，文本编辑器等。在Outlook中粘贴时，我遇到了IE问题。 Chrome工作正常。当我使用IE浏览器复制并粘贴到Outlook时，我的表格没有正确复制。请看下面的图片。我看到每个td和每个td / th之间的差距。
IE：
从IE中粘贴Outlook复制。您可以看到tr，td / th单元格之间的间隙
从Chrome中粘贴Outlook复制。很顺利。
请参阅下面的代码。为了工作，我给了内联样式。请原谅长代码。
MyPage.ts
private onCopyToClipboard(event: any, elementId: string, textOnly: boolean = false) {
if (this.IsBrowserIe) {
window.getSelection().removeAllRanges();
document.execCommand('copy');
}
console.log(document.getElementById('copyDIV').innerHTML);
const range = document.createRange();
range.selectNode(document.getElementById('copyDIV'));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
window.getSelection().removeAllRanges();
}
MyPage.html
<div id="copyDIV">
<table style="font-family:Calibri,Arial,Helvetica,sans-serif ;font-size:12px ;line-height:1em ;border: 1px solid black ; border-left: 0; border-right: 0">
<tbody>
<tr style="height:30px;">
<th style="background-color: gray; color: white; font-weight: bold; vertical-align: middle;
white-space: nowrap;word-wrap: none; border-bottom: 1px dotted silver;text-align: left;
height: 27px;
line-height: 27px;
border: 0px;
border-bottom: 1px dotted silver;
padding: 0px;
padding-left:8px;" colspan="4" >Employee Salary </th>
</tr>
<tr style="height:29px;">
<th style=" background-color: gray;
color: white;
font-weight: bold;
vertical-align: middle;
white-space: nowrap;
text-align: center;
border: 0px;
border-bottom: 1px dotted silver;"> Department</th>
<th style=" background-color: gray;
color: white;
font-weight: bold;
vertical-align: middle;
white-space: nowrap;
text-align: center;
border: 0px;
border-bottom: 1px dotted silver;">March</th>
<th style=" background-color: gray;
color: white;
font-weight: bold;
vertical-align: middle;
white-space: nowrap;
text-align: center;
border: 0px;
border-bottom: 1px dotted silver;">April</th>
<th style=" background-color: gray;
color: white;
font-weight: bold;
vertical-align: middle;
white-space: nowrap;
text-align: center;
border: 0px;
border-bottom: 1px dotted silver;">Grand Total</th>
</tr>
<tr style="height:22px;" class="ng-star-inserted">
<td class="distributionTableFirstRowFirstCellNoBorder">Name1</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;
border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">4,400.00</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
</td>
<td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">4,400.00</td>
</tr>
<tr style="height:22px;">
<td class="distributionTableFirstRowFirstCellNoBorder">Name2
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
2,000.00
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ; border-right: 0.25px solid silver "
class="distributionTableCellNoBorder">
2,200.00
</td>
<td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
4,200.00
</td>
</tr>
<tr style="height:22px;" >
<td class="distributionTableFirstRowFirstCellNoBorder ">Name3
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder ">
2,300.00
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
2,500.00
</td>
<td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
4,800.00
</td>
</tr>
<tr style="height:22px;">
<td class="distributionTableFirstRowFirstCell4Line" style="border-bottom: 1px solid black">
Name4
</td>
<td class="distributionTableCell4Line " style="margin:0px; border-top: 1px dotted gray ;
border-left: 0.25px solid silver ;border-right: 0.25px solid silver;
border-bottom: 1px solid black;text-align:right;">
250.00
</td>
<td class="distributionTableCell4Line" style="margin:0px; border-top: 1px dotted gray ;
border-left: 0.25px solid silver ;border-right: 0.25px solid silver;border-bottom: 1px solid black;text-align:right;">
500.00
</td>
<td class="distributionTableFirstRowLastCell4Line" style="border-bottom: 1px solid black;text-align: right;">
750.00
</td>
</tr>
<tr style="height:22px;" class="ng-star-inserted">
<td class="distributionTableFirstRowFirstCellNoBorder">Name5
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
17,700.00
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray; border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
28,200.00
</td>
<td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
45,900.00
</td>
</tr>
<tr style="height:22px;">
<td class="distributionTableFirstRowFirstCellNoBorder">Name6
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
9,000.00
</td>
<td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
28,800.00
</td>
<td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
37,800.00
</td>
</tr>
<tr style="height:22px;">
<th class="distributionTableFooterCellFirst" style="text-align:right;border-bottom: 1px solid black;
border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">Grand Total</th>
<th class="distributionTableFooterCell tablelightGrayCell" style="text-align:right;border-bottom: 1px solid black;
border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">60,000.00</th>
<th class="distributionTableFooterCell tablelightGrayCell" style="text-align:right;border-bottom: 1px solid black;
border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">100,000.00</th>
<th class="distributionTableFirstRowLastCell3 " style="text-align:right;border-bottom: 1px solid black;border-top: 1px solid black;
border-left: 0.25px solid silver; border-right: 0.25px solid silver;">160,000.00</th>
</tr>
</tbody>
</table>
</div>
更新1： 能够使用border-collapse去除tr，td / th之间的间隙：collapse;在我的表格的样式中，在copyDIV中。现在我需要处理停止表以占用Outlook中的整个宽度。
更新2：
我从其他开发人员那里获取了这个项目，在仔细浏览了mystyles.scss文件中的样式之后，我看到了几个我们有宽度的地方：100％。我删除了它们，现在它很好。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？