PDF 출력에 바코드 추가
바코드는 기계가 읽을 수 있는 데이터 패턴이다. 바코드 스캐너나 스마트폰 카메라로 바코드를 스캔할 수 있다. 제품 세부 사항, 재고 번호 또는 웹 사이트 URL 등의 인코딩 정보가 유용할 수 있습니다. 바코드를 추가하면 데이터를 쉽게 캡처하고 고객 경험을 향상시키며 데이터 관리 및 보안을 향상시킬 수 있습니다.
바코드에 대한 스타일을 만들 수 있습니다. 그리고 페이지 레이아웃에 바코드를 삽입하는 데 사용합니다. 원하는 페이지 레이아웃의 샘플 바코드에 스타일을 적용할 수 있습니다.
이 자습서는 PDF 출력에 바코드를 추가하는 데 도움이 됩니다.
바코드를 생성하는 단계
바코드를 생성하려면 다음 단계를 수행하십시오.
템플릿의 CSS를 업데이트하여 바코드 값 렌더링
수정 layout.css PDF 생성 중 바코드를 렌더링할 파일입니다. 'qrcode' 및 'pdf417'과 같은 다양한 바코드 유형이 지원됩니다. 자세한 내용은 바코드 유형.
...
.barcode {
-ro-replacedelement: barcode;
-ro-barcode-type: code128;
-ro-barcode-size: 100%;
-ro-barcode-content: content();
object-fit: contain;
margin-top: 2mm;
}
...
CSS 스타일을 사용하여 바코드를 생성합니다
다양한 방법으로 바코드를 생성할 수 있습니다. 몇 가지 예는 다음과 같습니다.
예 1
템플릿 헤더에 바코드 자리 표시자를 추가한 다음 스타일을 적용합니다.
-
편집 템플릿 > 페이지 레이아웃
-
페이지 레이아웃을 선택합니다. 예를 들어 머리글이나 바닥글이 포함된 표지 페이지 레이아웃을 선택할 수 있습니다.
-
바코드를 삽입할 위치에 다음 범위를 추가합니다.
<span class="barcode">Sample barcode</span></p>note note NOTE 에서 정의한 것과 동일한 클래스 이름 사용 layout.css. -
바꾸기
<Sample barcode>바코드 스캐너로 읽을 값 포함…
페이지 레이아웃이 포함된 템플릿을 사용하여 출력 PDF 생성 시 바코드를 볼 수 있습니다. 이전 단계를 수행한 후에는 바코드로 PDF 출력을 생성할 수 있습니다.
다음 스크린샷에는 PDF 출력에 샘플 바코드가 표시됩니다.
예 2
수정 Common.plt 파일 위치: 기본 템플릿을 사용하여 프로젝트 제목 뒤에 바코드를 추가합니다.
ISBN 번호에 대한 바코드를 만들려면 ISBN 번호를 추가합니다. 그런 다음 ISBN 번호를 사용하여 바코드를 생성합니다.
...
<div data-region="header">
<p class="chapter-header"><span data-field="project-title" data-format="default">Project Title</span> </p>
<p><span class="barcode">978-1-56619-909-4</span></p>
</div>
}
...
예 3
맵 메타데이터를 사용하여 바코드를 생성하려면 다음을 수행합니다.
에 있는 모든 메타데이터 사용 <topicmeta> 바코드로 표시할 DITA 맵의 요소입니다. 올바른 XPath를 사용해야 합니다. 예를 들어 다음을 추가할 수 있습니다 <resourceid> 다음에서 <topicmeta> DITA 맵의
다음 예제에서는 리소스 ID가 바코드를 생성하는 주 입력 역할을 합니다.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE map PUBLIC "-//OASIS//DTD DITA Map//EN" "technicalContent/dtd/map.dtd">
<map id="GUID-3c330691-4dac-4020-904a-d2d6246aeeb1-en">
<title>Barcode Sample</title>
<topicmeta>
<resourceid id="7a5bda1c-b1db-4fd8-8763-a731e2e8abba">
</resourceid>
</topicmeta>
<topicref href="GUID-139f6c64-bea3-4f17-8b22-ee131557e249-en.dita" type="topic">
</topicref>
</map>
다음과 같이 페이지 레이아웃에서 리소스 ID를 사용할 수 있습니다.
<div data-region="header">
<p class="chapter-header"><span data-field="project-title" data-format="default">Project Title</span> </p>
<p><span class="barcode" data-field="metadata" data-format="default" data-subtype="//resourceid/@id">Resource ID (barcode)</span></p>
</div>
}
바코드 유형 barcode-types
일반적으로 사용되는 바코드 중 일부는 다음과 같습니다.