브라우저 PDF 인쇄 + CSS를 통해 페이지 지정 등에 대한 추가 정보 조정
요약:
Explorer에서 출력 PDF를 인쇄하는 경우CSS를 통해 인쇄 영역 지정하기
이것은 페이지의 위치를 지정하는 예이다.
일반적인 브라우저 사양인 것 같으므로 CSS 조정 이외에는 PDF 레이아웃을 조정할 필요가 없습니다.
한번 해봤어요.
인쇄 시 웹 화면의 일반 제목, 사이드바, 광고 제목 등을 대상에서 제외한다.
주요 컨텐트만 인쇄하도록 조정할 수 있습니다.
페이지 나누기는 사용자 정의 탭과 같은 규칙에 의해 결정되며, 클래스 이름을 지정한 후에 화면 표시에div, hr 탭 변환을 표시합니다.
CSS로 적용하려면
시험은 넥스트다.js/SSG,cloudflare를페이지에서 디버깅을 한 후 인쇄 테스트를 진행하였다.
프로비저닝
참고 자료
https://developer.mozilla.org/ja/docs/Web/CSS/page-break-before
https://developer.mozilla.org/ja/docs/Web/CSS/@media
인쇄 범위 설정
인쇄 범위 설정, @media print
@media print {
.hidden_print{
display: none;
}
}
수정 페이지:page-break-before
.pdf_next_page {
page-break-before: always;
}
:::nextpage
<hr class="pdf_next_page" />
/src/pages/posts/[id].tsx
[id].tsx
/* pdf print css add */
import Head from 'next/head'
import React from 'react'
import Link from 'next/link';
import marked from 'marked'
import Layout from '../../components/layout'
import LibCommon from '../../libs/LibCommon'
import LibCms from '../../libs/LibCms'
//
export default function Page({ blog }) {
//console.log(blog)
return (
<Layout>
<Head><title key="title">{blog.title}</title></Head>
<div className="container bg-light">
<div className="hidden_print">
<Link href="/home" >
<a className="btn btn-light btnx-outline-orange mt-2">Back</a>
</Link>
<hr className="mt-2 mb-2" />
<div className="show_head_wrap">
<i className="bi bi-house-fill mx-2"></i> ＞
{blog.title}
</div>
</div>
<div className="card shadow-sm my-2">
<div className="card-body">
<h1>{blog.title}</h1>
Date: {blog.created_at}<br />
Category : {blog.category.name }
</div>
</div>
<div className="shadow-sm bg-white p-4 mt-2 mb-4">
<div id="post_item" dangerouslySetInnerHTML={{__html: `${blog.content}`}}>
</div>
</div>
</div>
<style>{`
div#post_item img{
max-width : 100%;
height : auto;
}
.show_head_wrap{ font-size: 1.4rem; }
.pdf_next_page {
page-break-before: always;
background-color: green;
border: none;
}
@media print {
.hidden_print{
display: none;
}
}
`}</style>
</Layout>
)
}
//
export const getStaticPaths = async () => {
const dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
const url = process.env.MY_JSON_URL+ '?' + dt
const req = await fetch( url );
const json = await req.json();
const items = json.items
const paths = []
items.map((item, index) => {
let row = { params:
{ id: item.save_id }
}
paths.push(row)
})
//console.log(paths)
return {
paths: paths,
fallback: false
}
};
export const getStaticProps = async context => {
const id = context.params.id
//console.log(id)
const dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
const url = process.env.MY_JSON_URL+ '?' + dt
const req = await fetch( url );
const json = await req.json();
let items = json.items
items = LibCommon.convert_items( items )
let item = LibCms.get_show_item( items, String(id) )
item.content = marked(item.content)
item = LibCms.get_post_itemOne(item , json.category_items)
//console.log(json.category_items )
return {
props: {
blog: item,
},
}
};
Reference
이 문제에 관하여(브라우저 PDF 인쇄 + CSS를 통해 페이지 지정 등에 대한 추가 정보 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/knaka0209/articles/c2d44d9991cc20텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
