Q&APDF.jsを使用してPDFをブラウザに表示させようとしてます。
表示するとき、PDFファイルによって、全角が表示されないファイルがあります。
フォントの設定？のようなことが必要なのでしょうか？
ご教授、よろしくお願いします。
html
1<head> 2 <meta charset="utf-8"> 3 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 4 <title>書類表示 | <%= system_name %></title> 5 <!-- Tell the browser to be responsive to screen width --> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- Font Awesome --> 8 <link rel="stylesheet" href="/adlte/plugins/fontawesome-free/css/all.min.css"> 9 <!-- Ionicons --> 10 <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 11 <!-- Theme style --> 12 <link rel="stylesheet" href="/adlte/dist/css/adminlte.min.css"> 13 <!-- Google Font: Source Sans Pro --> 14 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> 15 <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> 16</head> 17<body> 18: 19 <section class="content"> 20 <div class="container-fluid"> 21 <div class="row"> 22 <canvas id="the-canvas"></canvas> 23 </div> 24 </div> 25 </section> 26: 27</body>
javascript
1 'use strict'; 2 var url = '/sample.pdf'; 3 var pdfjsLib = window['pdfjs-dist/build/pdf']; 4 pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; 5 var state = { 6 pdf: null, 7 currentPage: 1, 8 zoom: 1.0 9 } 10 // PDFの読み込み 11 pdfjsLib.getDocument(url).promise.then((pdf) => { 12 state.pdf = pdf; 13 render(); 14 }); 15 function render() { 16 state.pdf.getPage(state.currentPage).then(function(page) { 17 var canvas = document.getElementById("the-canvas"); 18 var ctx = canvas.getContext('2d'); 19 var viewport = page.getViewport({scale: state.zoom}); 20 canvas.width = viewport.width; 21 canvas.height = viewport.height; 22 page.render({ 23 canvasContext: ctx, 24 viewport: viewport 25 }); 26 }); 27 }
回答1件
0
自己解決
pdfjsLib.getDocumentにcMapUrlとcMapPackedの指定が必要でした。
pdfjsLib.getDocument({ data : wB64, cMapUrl : '/pdfjs-dist/build/cmaps/', cMapPacked : true }).promise.then((pdf) => {
ただ、
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
のままだと、cMapUrlが認識されず、
<script src="/pdfjs-dist/build/pdf.js"></script>pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-dist/build/pdf.worker.js';
と、両方ともcmapsと同じ場所を指定する必要がありました。
投稿2021/11/11 18:04
総合スコア42
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。