Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- solidity
- web3
- Programming
- Docker
- server
- ERC165
- NFT
- 트랜잭션
- 네트워크
- JavaScript
- erc721
- web
- geth
- 블록체인
- erc
- MySQL
- ethers
- Python
- Ethereum
- github
- 이더리움
- truffle
- blockchain
- git
- web3.js
- 제어의역전
- tcp
- ERC20
- 스마트 컨트랙트
- 솔리디티
Archives
- Today
- Total
멍개의 연구소
js와 css로 프린트를 제어해보자. 본문
웹에서 프린트 제어가 불가능 한 줄 알았는데 프린트 클릭 시 스크립트로 해당 이벤트를 받아올 수 있다.
하지만 스크립트를 사용하는 방법은 브라우저마다 작동을 하지 않을 수 있다.
좀 더 찾아보니 css로 인쇄되는 영역을 제어를 해줄 수 있다. @media print를 이용하면 된다.
<html>
<head>
<title>print test page</title>
<style>
@media print {
.np{
display:none;
}
}
</style>
</head>
<body>
<div class="np">
test
</div>
<div>
test1
</div>
<div>
test1
</div>
<div>
test1
</div>
</body>
</html>
위 코드를 보면 np 클래스를 @media print에 넣어주었다. @media print는 인쇄됐을 때의 스타일을 지정을 해주는 것이다.
위에서는 해당 페이지를 인쇄할 때 p를 display : none으로 가려주었다.
@media print를 이용하면 좀 더 멋진 인쇄물을 만들 수 있다.
<script>
var beforePrint = function() {
console.log('이 Function은 프린트 이전 호출');
};
var afterPrint = function() {
console.log('이 Function은 프린트 이후 호출');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
해당 코드는 프린트 전, 후로 호출되는 스크립트 입니다.
chrome, opera, explore에서는 정상작동을 하지만 타 브라우저는 정상적으로 작동하지 않을 수 있습니다.
'언어 > 자바스크립트 & 타입스크립트' 카테고리의 다른 글
| [react] react 작업환경 설정 (0) | 2017.05.20 |
|---|---|
| javascript arrow function과 array.prototype의 조합 (0) | 2017.04.28 |
| Javascript Asynchronous, synchronous and Promise (0) | 2017.04.28 |
Comments