Vue.jsでPDFビューワを使おうとしてつまずいたこと
JavaScript製のPDFビューワを使うメリットとして、
独自のボタンが配置できる・PDFファイルからサムネイルの生成ができる等あるかと思います。
日本語フォントが表示できなかった
今回、PDF.js
ベースの Vue.js ライブラリ vue-pdf
を使おうとした際に、
一部の日本語フォントが表示できなかったので、対策をまとめます。
今回、使用したサンプルコードはこちらです。
Example - display multiple pages of the same pdf document
<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 25%"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
export default {
components: {
pdf
},
data() {
return {
src: loadingTask,
numPages: undefined,
}
},
mounted() {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
}
}
</script>解決策①
cMapファイルのダウンロード
以下あたりから、PDF.jsのソースをダウンロードし、そこに含まれているcmapsディレクトリをそのまま全てVue.jsのpublicディレクトリへ入れておきます。
https://mozilla.github.io/pdf.js/getting_started/#download
cMapファイルの読み込み
さらに、PDF読み込み時に先ほどのcMapファイルのパスを指定してあげるだけです。
var loadingTask = pdf.createLoadingTask({
url: 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
cMapUrl: './cmaps/',
cMapPacked: true,
});解決策②
やっていることは同じなのですが、jsDelivrなら
いちいちcmapsを使わなくてもCDNからそのまま読み込めるっぽいので紹介します。
var loadingTask = pdf.createLoadingTask({
url: 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
cMapPacked: true,
});