1
Help us understand the problem. What are the problem?

posted at

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/pdfjs-dist@2.11.338/cmaps/',
        cMapPacked: true,
});

引用:https://qiita.com/coat1953/items/b3c10b77f4fdd3112298

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?