图片未在window.print（）上打印
我不确定为什么会这样，或者如何解决。
我要打开一个新窗口，将html写入该窗口，然后使用window.print（）方法从该窗口打印html内容。除了一张图像，所有内容都会显示在Chrome的默认打印窗口中。尤其令人沮丧的是，因为页面上显示了两张图像，而其中只有一张被打印，而另一张则没有。
更令人沮丧的是，如果我只在该窗口中执行ctrl + p，它会同时打印两个图像……我听不懂。我没有任何媒体打印查询或任何可以进行打印的查询，以便图像无法打印，因此我对为什么会发生这种情况感到非常困惑。
图像在打印之前确实已加载到页面上，我通过将超时设置为5秒来确保了这一点，并且它仍然执行相同的操作。我认为从本地源加载图像需要5秒钟就足够了。
以下是我的代码片段。
QuotePDF.js
import React from 'react';
import '../../StyleSheets/QuotePDF.css';
import ATALogo from '../../../public/Images/ataLogo.png';
export default class QuotePDF extends React.Component{
constructor(props){
super(props);
this.state = {
AdImage: this.props.AdImage,
UserEmail: this.props.UserEmail,
EmailBody: this.props.EmailBody,
User: this.props.User,
CustomerInfo: this.props.CustomerInfo,
CustomerId: this.props.CustomerId,
FormattedDate: this.props.FormattedDate,
Quotes: this.props.Quotes,
singleTotal: "",
singleAnnualTotal: "",
doubleTotal: "",
doubleAnnualTotal: "",
bannerTotal: "",
bannerAnnualTotal: "",
}
}
GenerateQuoteNumber(){
var todaysDate = new Date();
var rep = this.state.User;
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var month = todaysDate.getMonth();
var date = todaysDate.getDate();
var year = todaysDate.getFullYear();
var monthChar = "";
var yearChar = "";
var repInits = "";
var quoteNumber = "";
if(date < 10){
date = "0" + date;
}
rep = rep.split(' ');
year = year.toString();
repInits = rep[0][0] + rep[1][0];
monthChar = chars[month];
year = year.split('');
yearChar = chars[year[1]];
quoteNumber = repInits + "Q" + monthChar + date + yearChar + year[2] + year[3];
return quoteNumber;
}
....
render(){
if(this.props.CustomerInfo != 0){
var customerName = this.props.CustomerInfo.extended_info.fields_by_name["Customer First Name"] + " " + this.props.CustomerInfo.extended_info.fields_by_name["Customer Last Name"];
var businessName = this.props.CustomerInfo.extended_info.fields_by_name["Business Name"];
var customerAddress = this.props.CustomerInfo.extended_info.fields_by_name["Street"];
var customerCity = this.props.CustomerInfo.extended_info.fields_by_name["City"];
var customerState = this.props.CustomerInfo.extended_info.fields_by_name["State"];
var customerZip = this.props.CustomerInfo.extended_info.fields_by_name["Zip"];
}
return(
<div id="mainpage" style={
{width: '95%', maxWidth: '972px', margin: 'auto', fontFamily: 'Lucida Sans Unicode, Lucida Grande, sans-serif'}
}>
<div id="innerMainPage" style={{display: 'flex'}}>
<div id="leftside" style={{float: 'left', width: '54%', marginLeft: '2%', fontSize: '11px'}}>
<div className='ATAImageDiv2' style={{width: '100%', height: '53px', maxWidth: '972px', display: 'block'}}>
<img style={{width: '150px', position: 'relative', right: '5%'}} className='ATALogoImage2' name='ATALogo' src={ATALogo} alt="ATALogo"/>
</div>
<p style={{fontWeight: 'bold', fontSize: '13px', position: 'relative', right: '3%'}}>SYT Solutions</p>
</div>
<div id="rightside" style={{textAlign: 'right', width: '45%', float: 'left', fontSize: '11px'}}>
<p style={{marginBottom: '7%', padding: '0', marginTop: '4px', fontWeight: 'bold'}}>{this.state.User}</p>
<div style={{marginBottom: '7%'}}>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Address</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Street</p>
</div>
<div>
<a href={`mailto:${this.props.UserEmail}?subject=Quote&body=${this.props.EmailBody}`}><button>Click To Accept</button></a>
</div>
</div>
</div>
<div id="quotetitle" style={{fontWeight: 'bold', fontSize: '14px', borderBottom: '1px solid black', width: '100%', marginBottom: '2.5%'}}>
QUOTE
</div>
<div id="innerMainPage" style={{display: 'block'}}>
<div id="leftside2" style={{float: 'left', width: '54%', marginLeft: '2%', fontSize: '11px'}}>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>{businessName}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Attention: {customerName}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>{customerAddress}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>{customerCity}, {customerState} {customerZip}</p>
</div>
<div id="rightside" style={{width: '20%', float: 'left', fontSize: '11px', fontWeight: 'bold'}}>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Quote Number</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Date</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Customer No.</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>Reference</p>
</div>
<div id="innerrightside" style={{textAlign: 'right', fontSize: '11px'}}>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}># {this.GenerateQuoteNumber()}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>{this.props.FormattedDate}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>{this.props.CustomerId}</p>
<p style={{margin: '0', padding: '0', marginTop: '4px'}}>PO 27687</p>
</div>
</div>
<table id="quotetable" style={{width: '100%', marginTop: '4%', border: '1px solid black', fontSize: '9px'}}>
<tbody>
<tr>
<th style={{width: '5%', textAlign: 'center'}}>StoreID</th>
<th style={{width: '10%', textAlign: 'center'}}>Store Name</th>
<th style={{width: '25%', textAlign: 'center'}}>Store Address, City</th>
<th style={{width: '7%', textAlign: 'center'}}>Next Start Date</th>
<th style={{width: '10%', textAlign: 'center'}}>Impressions</th>
<th style={{width: '4%', textAlign: 'center'}}>Single Ad</th>
<th style={{width: '6%', textAlign: 'center'}}>Single Annual</th>
<th style={{width: '5%', textAlign: 'center'}}>Double Ad</th>
<th style={{width: '7%', textAlign: 'center'}}>Double Annual</th>
<th style={{width: '5%', textAlign: 'center'}}>Banner</th>
<th style={{width: '7%', textAlign: 'center'}}>Banner Annual</th>
</tr>
</tbody>
</table>
<table id="innertable" style={{width: '100%', borderBottom: '1px solid black', fontSize: '9px'}}>
{this.RenderPriceList(this.props.Quotes)}
</table>
<table id="quotetableTotals" style={{width: '100%', marginTop: '2%', fontWeight: 'bold', fontSize: '11px'}}>
<tbody>
<tr>
<td style={{width: '5%', textAlign: 'center'}}>TOTAL</td>
<td style={{width: '10%', textAlign: 'center'}}></td>
<td style={{width: '25%', textAlign: 'center'}}></td>
<td style={{width: '7%', textAlign: 'center'}}></td>
<td style={{width: '10%', textAlign: 'center'}}></td>
<td style={{width: '4%', textAlign: 'center'}}>${this.state.singleTotal}</td>
<td style={{width: '6%', textAlign: 'center'}}>${this.state.singleAnnualTotal}</td>
<td style={{width: '5%', textAlign: 'center'}}>${this.state.doubleTotal}</td>
<td style={{width: '7%', textAlign: 'center'}}>${this.state.doubleAnnualTotal}</td>
<td style={{width: '5%', textAlign: 'center'}}>${this.state.bannerTotal}</td>
<td style={{width: '7%', textAlign: 'center'}}>${this.state.bannerAnnualTotal}</td>
</tr>
</tbody>
</table>
{this.ResizeImage()}
<div id="adproof" style={{display: 'block', paddingTop: '5%', width: '50%', marginLeft: 'auto', marginRight: 'auto'}}>
<img id="imgproof" name='ADProof' src={this.props.AdImage} alt="" height="25%" width="100%" scrolling="no"/>
</div>
</div>
);
}
}
对所有内联样式都感到抱歉，因为这似乎是使其正确格式化的唯一方法。
ClientFile.js
import React from 'react';
export default class ClientFile.js extends React.Component{
constructor(props){
super(props);
this.state = {
... some state stuff
sortedArray: this.props.quotes
}
}
RenderPDF(sortedArray){
... some more fun stuff
return (
<div id="HiddenQuote">
<QuotePDF Quotes={sortedArray} FormattedDate={todaysDate} CustomerId={customerId} AdImage={this.state.AdImage} User={this.state.User} UserEmail={this.state.UserEmail} EmailBody={emailBody} CustomerInfo={this.state.CustomerInfo}></QuotePDF>
</div>
);
}else{
return (<div></div>);
}
}
savePDF(){
//window.print();
setTimeout(function () {
var html = document.getElementById("HiddenQuote").innerHTML;
var myWindow = window.open("", "", "");
myWindow.document.write(html);
myWindow.print();
//myWindow.close();
}, 1000);
}
render(){
return(
<div id="maincontainer">
... some interesting stuff
<button onClick={this.SavePDF.bind(this)}>Save PDF</button>
{this.RenderPDF(this.state.sortedArray)}
</div>
)
}
}
这是我使用window.print（）时的样子。第二张图片在那里，出于隐私目的，我仅将其其余部分屏蔽了。
如果我只是在那个窗口上按ctrl + p，这就是它的样子。
后者显示了两个图像，但是我不明白为什么两个都不会在print（）方法中显示。 如果有人有任何想法或建议，我将不胜感激！谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？