ブラウザでのバニラJavaScriptの表示方法🤯

昨日、私はウェブサイトでPDF文書を表示する方法を不思議に思いました.
私はiframeとドキュメントを表示しようとしましたが、それはモバイルデバイス上で動作しませんでした😔.
検索のいくつかの時間後、私は解決Mozilla PDFを見つけた.JSライブラリー😏.
Live demo
GitHub repo

Mozilla PDFファイル.js

A general-purpose, web standards-based platform for parsing and rendering PDFs.

MozillaのPDF.JSプロジェクトは、Apache 2ライセンスの下でライセンスされているオープンソースプロジェクトです.
ライブラリは基本的にのみブラウザでPDFファイルを許可します.

ブラウザのUIで詳細を見るなら、ブラウザでPDFを開くならば、それはMozilla Firefoxと同じであるとわかります.
ブラウザのデモ版はthis linkで利用可能です.
ただし、あなたのアプリケーション内のすべてのこれらの機能を必要としない場合は、PDFを使用するオプションがあります.js API.
More about PDF.js

PDFレンダラを構築する方法
まず、PDFを追加する必要があります.我々のウェブサイトへのJS図書館、我々は単純な線でそれをします.
私はPDFを使用しています.jsバージョン2.0.943 .他のバージョンでは、APIへの変更が起こるかもしれません.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>

我々のアプリは、我々は、次の前のページに移動し、拡大または縮小することができるナビゲーションキーで構成されます.

<div class="pdf-toolbar">
   <div id="navigation_controls">
      <button class="pdf-toolbar-button" id="previous">Previous</button>
      <input class="pdf-input" id="current_page" value="1" type="number"/>
      <button class="pdf-toolbar-button" id="next">Next</button>
    </div>

   <div id="zoom_controls">  
     <button class="pdf-toolbar-button" id="zoom_in">+</button>
     <button class="pdf-toolbar-button" id="zoom_out">-</button>
    </div>
</div>

私たちのPDFドキュメントは、キャンバスの要素に表示されるので、我々はそれを埋め込む必要があります.

<div id = "canvas_container">
   <canvas id = "pdf_renderer"> </canvas>
</div>

JavaScriptを追加しましょう.

var defaultState = {
    pdf: null,
    currentPage: 1,
    zoom: 1
}

// GET OUR PDF FILE
pdfjsLib.getDocument('file.pdf').then((pdf) => {

    defaultState.pdf = pdf;
    render();

});

// RENDER PDF DOCUMENT
function render() {
    defaultState.pdf.getPage(defaultState.currentPage).then((page) => {

        var canvas = document.getElementById("pdf_renderer");
        var ctx = canvas.getContext('2d');

        var viewport = page.getViewport(defaultState.zoom);

        canvas.width = viewport.width;
        canvas.height = viewport.height;

        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
    });
}

// FUNCTION GO TO PREVIOUS SITE
document.getElementById('previous').addEventListener('click', (e) => {
    if (defaultState.pdf == null || defaultState.currentPage == 1)
        return;
    defaultState.currentPage -= 1;
    document.getElementById("current_page").value = defaultState.currentPage;
    render();
});

// FUNCTION GO TO PREVIOUS NEXT
document.getElementById('next').addEventListener('click', (e) => {
    if (defaultState.pdf == null || defaultState.currentPage > defaultState.pdf._pdfInfo.numPages)
        return;
    defaultState.currentPage += 1;
    document.getElementById("current_page").value = defaultState.currentPage;
    render();
});

// FUNCTION GO TO CUSTUM SITE
document.getElementById('current_page').addEventListener('keypress', (e) => {
    if (defaultState.pdf == null) return;

    var code = (e.keyCode ? e.keyCode : e.which);

    if (code == 13) { // ON CLICK ENTER GO TO SITE TYPED IN TEXT-BOX
        var desiredPage =
            document.getElementById('current_page').valueAsNumber;

        if (desiredPage >= 1 && desiredPage <= defaultState.pdf._pdfInfo.numPages) {
            defaultState.currentPage = desiredPage;
            document.getElementById("current_page").value = desiredPage;
            render();
        }
    }
});

// FUNCTION FOR ZOOM IN
document.getElementById('zoom_in').addEventListener('click', (e) => {
    if (defaultState.pdf == null) return;
    defaultState.zoom += 0.5;
    render();
});

// FUNCTION FOR ZOOM OUT
document.getElementById('zoom_out').addEventListener('click', (e) => {
    if (defaultState.pdf == null) return;
    defaultState.zoom -= 0.5;
    render();
});

我々は今、我々はダウンロードせずに任意のデバイス上の任意のPDFを表示できるページを作成しました.
ここでは、最終版の外観です.

あなたのポートフォリオのPDFでCVを持っている場合は、今あなたのブラウザでそれを表示することができます.
私はこのガイドは、あなたが私の上に私に従うことができるより多くのコンテンツのために助けてほしい.