Svakako, ovo smatrajte vodičem o tome kako implementirati PDF preglednik u Vue.js aplikaciju koristeći Jest za testiranje.
Vue.js je progresivni JavaScript okvir koji se koristi za izgradnju korisničkih interfejsa. Njegov osnovni fokus je samo na sloju prikaza, što ga čini lakim za korištenje i integraciju s drugim bibliotekama ili postojećim projektima. Vue.js se takođe odlično slaže sa Jestom, platformom za testiranje nulte konfiguracije sa divnim iskustvom programera. S druge strane, gledanje PDF-a je malo nezgodno u JavaScriptu, ali postoje biblioteke poput PDF.js koje olakšavaju prikazivanje PDF-ova u pretraživaču.
Zaronimo odmah u rješenje.
Kreiranje Vue.js aplikacije
Za ovaj vodič koristit ćemo Vue CLI za kreiranje naše aplikacije. Nakon uspješne instalacije, pokrenite sljedeću naredbu da kreirate novi projekt.
vue create pdf-viewer
Nakon kreiranja naše aplikacije, sljedeći korak je dodavanje PDF.js biblioteke u projekat. Ova biblioteka je platforma opće namjene zasnovana na web standardima za raščlanjivanje i prikazivanje PDF-ova.
npm install pdfjs-dist
Renderiranje PDF-a pomoću PDF.js
Da bismo prikazali PDF u komponenti Vue, prvo moramo uvesti PDF.js biblioteku u našu komponentu.
import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf'
Zatim pišemo metodu koja će upravljati prikazivanjem PDF-a na platnu.
methods: {
renderPage(page) {
// Code for rendering page
},
renderPdf(url) {
// Code for rendering pdf
},
}
Testiranje sa Jestom
Jest je moćan JavaScript okvir za testiranje sa fokusom na jednostavnost. Često se koristi za testiranje Vue.js aplikacija jer pruža uslužne programe za testiranje komponenti jedne datoteke.
Prvo, moramo instalirati Jest i Vue Test Utils.
npm install --save @vue/test-utils jest vue-jest
Nakon instalacije, možemo postaviti jednostavan test za naš PDF preglednik:
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()
})
})
Ovo je samo vrh ledenog brijega, Jest omogućava mnogo sveobuhvatnije testove kao što je provjera da li renderirani PDF odgovara dokumentu.
rezime
Ukratko, Vue.js je divan alat za izgradnju korisničkih interfejsa, Jest pruža divno iskustvo testiranja, a u kombinaciji sa PDF.js, možemo sa relativnom lakoćom izgraditi preglednik PDF-a zasnovan na pretraživaču. Ovaj vodič pruža opću ideju o tome kako integrirati ove tehnologije, mogućnosti su beskrajne s ovim moćnim alatima koji su vam na raspolaganju.
