Apakah yang perlu saya lakukan jika reaksi tidak memaparkan maklumat penjanaan PDF?

Penyelesaian kepada masalah yang React tidak memaparkan maklumat penjanaan PDF: 1. Dapatkan alamat url PDF dari latar belakang, dan kemudian minta fail PDF 2. Tetapkan responseType kepada blob apabila meminta fail PDF; 3. Tukar PDF Tukar fail ke format base64 4. Gunakan kanvas untuk membuat PDF.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah yang perlu saya lakukan jika reaksi tidak memaparkan maklumat penjanaan PDF?

Menyelesaikan masalah paparan dan pencetakan PDF dalam projek tindak balas

Terdapat keperluan sedemikian dalam projek baru-baru ini:

• pdf boleh dipaparkan pada halaman

• Jika anda tidak mahu mencetak keseluruhan halaman dan hanya mencetak bahagian yang memaparkan PDF, anda boleh menggunakan penyemak imbas fungsi pencetakan terbina dalam

Paparan fail PDF

Apabila saya mendapat keperluan ini, saya benar-benar keliru. Memandangkan saya tidak pernah melakukan perkara yang serupa, saya tidak tahu dari mana hendak bermula. Dalam proses menyemak maklumat, saya mendapati bahawa terdapat banyak pemalam jQuery yang boleh memaparkan PDF, tetapi kami adalah projek aplikasi satu halaman bertindak balas Nampaknya pemalam ini tidak sesuai dan kami hanya boleh mencari yang lain kaedah.

Kemudian saya menjumpai komponen react-pdf-js pada npmjs.com dan fikir ia mungkin untuk memaparkan pdf. Saya tidak sabar untuk memasang kebergantungan react-pdf-js ke dalam projek melalui perintah cnpm install react-pdf-js --save-dev, dan memperkenalkannya ke dalam projek melalui import PDF daripada 'react-pdf-js' . Masukkan f73e22e5f1b35afbd2432f86384ddfdd

Semasa proses penyahpepijatan, didapati bahawa fail pdf statik boleh dipaparkan, tetapi fail pdf dalam talian tidak boleh. Melalui mesej ralat kawalan, kami tahu bahawa komponen react-pdf-js memerlukan alamat fail berada dalam format URL atau base64 Memandangkan URL tidak berfungsi, kami hanya boleh bergantung pada base64.

Dapatkan fail PDF

Pada mulanya, saya terus menukar url alamat dalam talian pdf kepada base64, tetapi ia tidak dapat dipaparkan. Kemudian saya mendapati bahawa tidak berguna untuk menukar url ke format base64 Anda perlu menukar kandungan fail pdf ke base64. Seterusnya, adalah logik untuk meminta semula fail pdf melalui alamat url pdf yang diperolehi dari latar belakang.

Saya menghadapi masalah kecil semasa melakukan bahagian ini: permintaan itu berjaya, tetapi fail pdf tidak dapat saya perolehi untuk masa yang lama dan tidak tahu bagaimana untuk menyelesaikannya masalah kepada arkitek syarikat kami, kami menganalisis bahawa ini disebabkan oleh masalah merentas domain, dan dia mengkonfigurasi pelayan nginx untuk menyelesaikan masalah merentas domain.

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

Tukar fail PDF kepada format base64

base64 boleh menyimpan fail dalam sebarang format, kaedah storan yang hebat. Tukar fail ke format base64.

Perlu diingatkan di sini bahawa apabila meminta fail pdf, responseType mesti ditetapkan kepada blob Mengapa jenis gumpalan digunakan diterangkan di bawah format.

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

Penukaran format base64, jika perlu, format blob akan ditukar kepada format pdf base64, dan dalam file={file}, ia akan dipaparkan pada penyemak imbas. Malah, ia akhirnya adalah PDF yang dibentangkan dalam kanvas.

Paparan PDF telah tamat dan langkah seterusnya ialah mencetak.

Pencetakan fail PDF

Pada penyemak imbas, pencetakan dibahagikan kepada pencetakan halaman penuh dan pencetakan bahagian tertentu. Projek perlu mencetak sebahagian daripada kandungan Terdapat banyak cara untuk mencapai pencetakan saya menggunakan kawalan CSS tradisional. Gunakan cetakan @media untuk menyembunyikan bahagian yang tidak perlu dicetak, dan kemudian yang lain adalah bahagian yang perlu dicetak.

Penyahpepijatan pencetakan fail PDF

Berikut ialah sedikit petua penyahpepijatan: kerana gaya dalam cetakan @media akan dipanggil hanya apabila cetakan penyemak imbas dipanggil, jadi Anda boleh letakkan bahagian gaya ini di luar Apabila bahagian yang tidak perlu dicetak disembunyikan, kemudian keluarkan gaya luaran ini dan cetak ke @media.

Panggil window.print() yang digunakan oleh penyemak imbas untuk mencetak Walaupun ia tidak serasi dengan semua penyemak imbas, penyemak imbas lanjutan biasa adalah serasi dan memenuhi keperluan projek kami.

Terdapat banyak masalah yang dihadapi dalam paparan dan pencetakan pdf Aliran di atas adalah ringkasan.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika reaksi tidak memaparkan maklumat penjanaan PDF?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!