Určitě to berte jako návod, jak implementovat prohlížeč PDF do aplikace Vue.js pomocí Jest pro testování.
Vue.js je progresivní framework JavaScript používaný pro vytváření uživatelských rozhraní. Jeho jádro se zaměřuje pouze na vrstvu zobrazení, což usnadňuje použití a integraci s jinými knihovnami nebo existujícími projekty. Vue.js se také skvěle spáruje s Jest, testovací platformou s nulovou konfigurací a úžasným vývojářským zážitkem. Na druhou stranu je prohlížení PDF v JavaScriptu trochu složitější, ale existují knihovny jako PDF.js, které usnadňují vykreslování PDF v prohlížeči.
Pojďme se ponořit přímo do řešení.
Vytvoření aplikace Vue.js
V této příručce budeme k vytvoření naší aplikace používat Vue CLI. Po úspěšné instalaci spusťte následující příkaz pro vytvoření nového projektu.
vue create pdf-viewer
Po vytvoření naší aplikace je dalším krokem přidání knihovny PDF.js do projektu. Tato knihovna je univerzální platforma založená na webových standardech pro analýzu a vykreslování souborů PDF.
npm install pdfjs-dist
Vykreslování PDF pomocí PDF.js
K vykreslení PDF v komponentě Vue musíme nejprve importovat knihovnu PDF.js do naší komponenty.
import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf'
Dále napíšeme metodu, která si poradí s vykreslením PDF na plátno.
methods: {
renderPage(page) {
// Code for rendering page
},
renderPdf(url) {
// Code for rendering pdf
},
}
Testování s Jest
Jest je výkonný testovací rámec JavaScriptu se zaměřením na jednoduchost. Často se používá k testování aplikací Vue.js, protože poskytuje nástroje pro testování jednosouborových komponent.
Nejprve musíme nainstalovat Jest a Vue Test Utils.
npm install --save @vue/test-utils jest vue-jest
Po instalaci můžeme nastavit jednoduchý test pro náš prohlížeč PDF:
import { mount } from '@vue/test-utils'
import PdfViewer from '@/components/PdfViewer'
describe('PdfViewer', () => {
test('is a Vue instance', () => {
const wrapper = mount(PdfViewer)
expect(wrapper.vm).toBeTruthy()
})
})
Toto je jen špička ledovce, Jest umožňuje mnohem komplexnější testy, jako je kontrola, zda vykreslené PDF odpovídá poskytnutému dokumentu.
Shrnutí
Stručně řečeno, Vue.js je skvělý nástroj pro vytváření uživatelských rozhraní, Jest poskytuje úžasné testovací zkušenosti a v kombinaci s PDF.js můžeme relativně snadno vytvořit prohlížeč PDF založený na prohlížeči. Tato příručka poskytuje obecnou představu o tom, jak tyto technologie integrovat, možnosti jsou nekonečné s těmito výkonnými nástroji, které máte k dispozici.
