난 그냥 내 각도 응용 프로그램에서 문서를 구축 PDFMake의 문서로 읽기 시작, 내가 좋아하는 몇 가지 질문 건너했습니다 이것 만 대답을 가진 적이 없어.
Angular 응용 프로그램에서 PDFMake 용 사용자 정의 글꼴을 가져 오는 방법에 대한 읽기 가능한 예제를 알고 있거나 제공 할 수 있는지 궁금합니다. "Lato"글꼴에 대한 파일을 다운로드했지만 지금 진행할 위치에 대한 단서가 없습니다.
문서에 표시된대로 라이브러리를 가져 왔습니다.
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
또한 다음과 같이 추가 선언이 작성된 예를 보았습니다.
pdfMake.fonts = {
Lato: {
normal: 'assets/fonts/Lato-Regular.ttf'
}
};
물론 글꼴의 이름과 무게를 정의하고 특정 글꼴에 대한 파일의 위치를 가리켜 야합니다. 하지만 그 후에는 실제로 PDFMake에 해당 글꼴을 사용하도록 지시하는 방법을 모릅니다.
도움을 주시면 잠시 동안 해결책을 찾으려고 노력해 왔습니다.
편집 : 문서에 따라 pdfmake node_modules 디렉토리에있는 파일을 직접 수정하여 Lato 글꼴을 사용할 수 있었지만 작동하지만 유지할 수 없기 때문에 node_modules를 변경하는 것을 피하고 싶습니다. 변경 사항을 추적하거나 다른 컴퓨터에서 프로젝트를 실행할 때 사용할 수 있습니다.
똑같이하려고 오후를 보냈습니다. 문서는 최소한이지만 알아 냈습니다.
1) 먼저 PdfMake 저장소를 로컬로 복제해야합니다.
https://github.com/bpampuch/pdfmake
2) 다운로드가 완료되면 코드 또는 숭고한 파일로 열고 계층 구조에있는 예제 디렉토리를 찾은 다음 글꼴 하위 디렉토리를 찾습니다.
내 것은 Roboto 글꼴과 그 안에 샘플 그림이있었습니다. Roboto를 사용하지 않아서 삭제했습니다.
3) 사용하려는 모든 TTF 글꼴을 fonts 디렉토리에 복사하십시오. 사실 저는 파일 크기를 줄이기 위해 하나만 사용했습니다.
3a) Gulp 설치 (설치되지 않은 경우)
3b) 선택적으로 이름 바꾸기
vfs_fonts.js
/ build 디렉토리에서 "vfs_fonts.js.old"또는 기타 파일로 이동합니다.
4) 터미널 또는 Powershell에서 다음 gulp 명령을 실행하십시오 ...
gulp buildFonts
새로운 vfs_fonts.js가 pdfMake / build 폴더에 나타납니다.
4a)이 단계는 선택 사항이지만 새로 만든 vfs_fonts.js가 컴파일되지 않았으므로 편집해야했습니다. 이전에 저장된 파일과 새 파일을 나란히 보면 볼 수 있습니다. 나는 대체 :
var vfs = {
기존 파일 선언으로 :
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
그리고 마지막 줄을 제거했습니다 ...
if (typeof this.pdfMake !== 'undefined' && typeof this.pdfMake.addVirtualFileSystem !== 'undefined') { this.pdfMake.addVirtualFileSystem(vfs); } if (typeof module !== 'undefined') { module.exports = vfs; }
5) 다음으로 새 vfs_fonts.js를 PdfMake를 사용하는 프로젝트에 복사하고 파일을 / assets / js에 복사했습니다.
6) 다음으로 내 각도 구성 요소의 가져 오기 선언 경로를 변경하십시오 (이미 가지고 있어야 함).
// import pdfFonts from 'pdfmake/build/vfs_fonts';
import pdfFonts from '../../assets/js/vfs_fonts';
7) pdfMake에서 새 글꼴을 만듭니다. 하나만 있으므로 모든 스타일이 동일한 TTF를 참조합니다.
pdfMake.fonts = {
Baloo2: {
normal: 'Baloo2-Regular.ttf',
bold: 'Baloo2-Regular.ttf',
italics: 'Baloo2-Regular.ttf',
bolditalics: 'Baloo2-Regular.ttf'
}
}
8) pdfDefinition에 새 글꼴 포함
defaultStyle: {
font: 'Baloo2'
},
이 작업을 수행하는 더 좋은 방법이있을 것 같지만 이것이 당신을 이끌기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다