Paparkan Fail PDF dalam Apl React Anda Tanpa Isu Melalui React-PDF
React-PDF membolehkan anda memaparkan fail PDF seolah-olah ia adalah imej dalam apl React tanpa sebarang kerumitan atau menggunakan berbilang pemalam.
Terdapat banyak kali pembangun perlu menambah PDF pada aplikasi React, dan walaupun sukar untuk mendapatkan resolusi, saiz atau reka letak yang betul, React-PDF membolehkan anda menambah PDF pada aplikasi React sama seperti imej. Ia percuma untuk dimuat turun, sumber terbuka, dan pakej lengkap. React PDF telah dibangunkan menggunakan JavaScript dan CSS dan serasi sepenuhnya untuk mana-mana aplikasi React.
Terdapat banyak versi React-PDF yang tersedia pada masa ini, dengan versi terkini ialah React-PDF v5. Versi lain sentiasa mendapat pembetulan pepijat dan kemas kini juga, bagaimanapun, menggunakan React-PDF v5 akan memberikan hasil yang optimum.
Untuk menggunakan React-PDF pastikan aplikasi React anda menggunakan versi terkini React iaitu React 16.3 atau lebih baru. Sekiranya, anda menggunakan versi lama React, maka anda perlu menggunakan versi lama React-PDF.
Bermula dengan React-PDF
Cara yang disyorkan dan paling mudah untuk bermula ialah memasang melalui npm, di bawah ialah arahannya.
Pasang React-PDF melalui npm
npm install react-pdf Anda juga boleh memasangnya secara manual; muat turun fail keluaran terkini terus daripada repositori GitHub.
Rendering Aksara Bukan Latin dalam API JavaSrcipt Percuma
Pustaka React-PDF sumber terbuka membolehkan pembangun perisian menghasilkan aksara bukan latin secara pemrograman di dalam aplikasi mereka sendiri menggunakan arahan JavaScript. React-PDF mempunyai sokongan aksara bukan Latin juga, dan jika anda ingin memastikan bahawa mana-mana aksara bukan Latin dipaparkan dengan betul apabila PDF dipaparkan dalam projek, anda boleh menyelesaikannya dengan cMaps yang disalin daripada pdfjs-dist.
Muatkan Halaman PDF Tunggal atau Berbilang menggunakan API JavaScript Percuma
Teg Dokumen membolehkan anda memuatkan dokumen PDF yang dihantar melalui prop Fail. Dengan teg ini, anda boleh memuatkan satu atau berbilang halaman, atau menambah navigasi juga. Anda juga boleh menyerlahkan teks pada halaman, menunjukkan jadual kandungan secara interaktif dan menyediakan pautan luaran juga.
Cara Memaparkan Halaman PDF Tunggal melalui API JavaScript
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
Urus Anotasi dalam Dokumen PDF melalui JavaScript
Pustaka JavaScript sumber terbuka React-PDF memberikan pengaturcara perisian keupayaan untuk mengurus pelbagai jenis anotasi secara pengaturcaraan di dalam dokumen PDF mereka. Sila ingat bahawa pengguna perlu memasukkan helaian gaya yang diperlukan untuk anotasi dipaparkan dengan betul. Ia membolehkan pengguna Serlahkan, teks, dakwat, nota, bentuk dan banyak lagi dengan mudah.
Cara Mengendalikan Pautan Luaran dalam PDF melalui JavaScript
import React, { useState } from 'react';
import { Document, Outline, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
const [pageNumber, setPageNumber] = useState(1);
function onItemClick({ pageNumber: itemPageNumber }) {
setPageNumber(itemPageNumber);
}
return (
);
}
