html媒体元素: 只能在pc浏览器上显示
<object data="./src-react/assets/agreement.pdf" type="application/pdf">wrqrq</object>
<object data="http://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4b8728ba4ebd4e1940277c426473b542-4807827.pdf" type="application/pdf"></object>
<object data="http://www.baidu.com" ></object>
<object>
<iframe src="http://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4b8728ba4ebd4e1940277c426473b542-4807827.pdf" style={{ width: "100%", height: "300px" }} >
</iframe>
</object>
react-pdf-js: 兼容pc与移动端pdf
import PDF from 'react-pdf-js';
export default class XXX extends ...{
renderPagination = (page, pages) => {
let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i>上一页</a></li>;
if (page === 1) {
previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i></a></li>;
}
let nextButton = <li className="next" onClick={this.handleNext}><a href="#">下一页<i className="fa fa-arrow-right"></i></a></li>;
if (page === pages) {
nextButton = <li className="next disabled"><a href="#"><i className="fa fa-arrow-right"></i></a></li>;
}
return (
<div>
<ul className="pager">
{previousButton}
{nextButton}
</ul>
</div>
);
}
render(){
let pagination = null;
if (this.state.pages) {
pagination = this.renderPagination(this.state.page, this.state.pages);
}
file="./agreement.pdf"
onDocumentComplete={this.onDocumentComplete}
page={this.state.page}
/>
{pagination}
}
}
网友评论