Aspose.PDF Editor

Apa itu Html5 PDF Editor oleh Aspose.PDF for .NET?

HTML5 PDF Editor oleh Aspose.PDF for .NET adalah editor PDF berbasis web open source yang memungkinkan pengguna untuk membuat, mengedit, dan mengonversi file PDF secara online dan pengguna dapat dengan mudah menyematkan editor dalam aplikasi web mereka sendiri untuk melihat dan mengedit file PDF. HTML5 PDF Editor dikembangkan menggunakan HTML5, jQuery Ajax, ASP.NET, Bootstrap dan backend didukung oleh Aspose.PDF for .NET. UI editor dijaga sangat sederhana untuk pemahaman yang mudah dan peningkatan fitur sesuai dengan kebutuhan pengguna.

Fitur

Ini mendukung fitur-fitur berikut:

Membuat file PDF baru.
Memuat dan Melihat file PDF.
Memuat file PDF dan Gambar dari Dropbox.
Mengekspor file PDF ke berbagai format file.
Menambahkan atau Menggabungkan file PDF.
Menyisipkan Halaman Baru.
Menghapus Halaman.
Memindahkan Halaman dalam file PDF.
Menyisipkan Teks dalam PDF.
Menyoroti Teks dalam PDF.
Memutar Teks yang Disisipkan dalam PDF.
Mencari Teks dalam PDF.
Mengganti Teks dalam PDF.
Menyisipkan Gambar.
Mengubah Ukuran Tanda Tangan dan Gambar.
Menyeret dan Memposisikan item yang disisipkan.
Memuat file PDF dengan kolom formulir.
Mengisi kolom formulir menggunakan Editor.
Menyimpan dan Mengekspor PDF dengan data kolom formulir.
Menyoroti kolom formulir yang diperlukan.
Menambahkan Lampiran ke File PDF.
Memuat Lampiran dari file PDF input.
Mengunduh file Lampiran.
Menghapus file Lampiran.
Menandatangani PDF menggunakan Gambar Tangan Bebas.

Persyaratan Sistem

Karena HTML5 PDF Editor adalah aplikasi Web .NET yang dikembangkan menggunakan ASP.NET, C#, HTML5, jQuery, Javascript. Anda akan memerlukan lingkungan sistem berikut untuk mengatur HTML5 PDF Editor di pihak Anda.

Visual Studio 2010 (atau lebih tinggi).
.NET Framework 3.5 (atau lebih tinggi).
Aspose.PDF for .NET.
jQuery 2.0.3.
Bootstrap 3.2.0.

Anda dapat menggunakan salah satu dari browser berikut untuk menjalankan aplikasi di pihak Anda:

Mozilla Firefox (disarankan).
Internet Explorer (versi 9 atau lebih baru).
Google Chrome.
Apple Safari.

Dukungan

Kami, di Aspose, memastikan untuk memberikan dukungan terbaik kepada pelanggan / pengguna kami untuk pertanyaan mereka dari segala jenis yaitu teknis atau penjualan. Silakan gunakan tautan di bawah ini untuk pertanyaan terkait lisensi dan penjualan atau pertanyaan teknis.

Panduan Pengembang PDF Editor

Membuat File PDF Baru

Selain mengedit dokumen PDF yang ada, Html5 PDF Editor juga mendukung pembuatan file PDF baru dari awal yang dapat Anda lakukan dengan menggunakan opsi Buat File Baru dari bilah menu. Menggunakan fitur ini, Anda dapat membuat PDF kosong di editor, menambahkan beberapa teks/gambar ke dalamnya dan menyimpannya dalam format yang diinginkan. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Buat File Baru” diklik di halaman

Ketika Anda mengklik “Item menu Buat File Baru”, metode onNewFileClicked dipanggil di file Editor.js.

jQuery - Mengirim permintaan Ajax ke server untuk metode CreateNewFile.

Lihat tab Editor.js di bawah untuk kode sumber metode onNewFileClicked, yang memanggil metode CreateNewFile di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode CreateNewFile. Ini menghapus data yang ada mengenai file yang dimuat sebelumnya menggunakan metode ResetData.

Pembuatan file PDF baru menggunakan Aspose.PDF for .NET

Setelah menghapus data menggunakan metode ResetData, metode CreateNewFile membuat file PDF baru menggunakan kelas Document dari Aspose.PDF for .NET. Seperti yang Anda lihat di tab di bawah, objek Document menghasilkan file dengan satu halaman kosong. Setelah file dihasilkan di server, file tersebut dikonversi menjadi gambar menggunakan metode ImageConverter untuk dimuat di kanvas.

Memuat file hasil ke kanvas.

Setelah file dikonversi menjadi gambar di sisi server, kontrol dikembalikan ke metode onNewFileClicked di Editor.js. Metode onNewFileClicked mengatur ulang semua koleksi sisi klien dan memuat file gambar yang dihasilkan ke kanvas menggunakan metode resetData.

Mengekspor PDF ke Berbagai Format File

HTML5 PDF Editor mendukung mengekspor file PDF ke berbagai format file yang dapat Anda lakukan dengan menggunakan opsi Ekspor File dari bilah menu. Menggunakan fitur ini, Anda dapat mengekspor file PDF ke format yang diinginkan. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Ekspor File” diklik di halaman.

Ketika Anda mengklik “Item menu Ekspor File”, Anda dapat memilih format ekspor dari daftar. Setelah memilih format ekspor, metode “ExportFile” dipanggil di file Editor.js.

jQuery - Mengirim permintaan server Ajax untuk metode btnFileExport_Click

Lihat tab Editor.js di bawah untuk kode sumber metode “ExportFile”. Ini mengirim permintaan ke metode server btnFileExport_Click dengan parameter format file di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Berdasarkan parameter format file yang diteruskan ke btnFileExport_Click, file PDF dikonversi menggunakan metode Save dari objek Aspose.PDF Document.

Ekspor file untuk Diunduh di Browser Klien

Setelah file dihasilkan di server, kontrol dikembalikan ke metode ExportFile di Editor.js dari mana file dikirim ke browser untuk diunduh oleh pengguna menggunakan metode ExportToBrowser.

Menambahkan atau Menggabungkan File PDF

Html5 PDF Editor mendukung penambahan atau penggabungan file PDF yang dapat Anda lakukan dengan menggunakan opsi Tambah File dari bilah menu. Menggunakan fitur ini, Anda dapat menambahkan file PDF ke file input Anda. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Tambah File” diklik di halaman.

Ketika Anda mengklik “Item menu Tambah File”, Anda dapat mengunggah file menggunakan dialog unggah file. Setelah file diunggah, metode “fileSelected” dipanggil di file Editor.js.

jQuery - Mengirim permintaan server untuk metode ProcessRequest

Lihat tab Editor.js di bawah untuk kode sumber metode “fileSelected”. File diposting ke server dan metode “ProcessRequest” dipanggil di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Berdasarkan parameter formulir yang diteruskan, file yang akan ditambahkan disimpan di server dan metode “AppendFile” dipanggil. Metode AppendFile, menambahkan file yang diunggah menggunakan Aspose.PDF for .NET, mengonversi file hasil menjadi gambar dan mengembalikan kontrol ke metode “fileSelected” di Editor.js.

Memperbarui konten kanvas setelah menambahkan file

Setelah file dihasilkan di server, kontrol dikembalikan ke metode “fileSelected” di Editor.js yang memperbarui konten editor.

Mengunggah File PDF Lokal

HTML5 PDF Editor mendukung mengunggah file PDF dari mesin lokal menggunakan opsi Buka Dari Komputer dari bilah menu. Menggunakan fitur ini, Anda dapat membuka file PDF yang ada dan melakukan pengeditan pada file PDF Anda. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Buka Dari Komputer” diklik di halaman.

Ketika Anda mengklik “Item menu Buka Dari Komputer”, Anda dapat mengunggah file input menggunakan dialog unggah file. Setelah file diunggah, metode “fileSelected” dipanggil di file Editor.js.

jQuery - Mengirim permintaan server untuk metode ProcessRequest

Lihat tab Editor.js di bawah untuk kode sumber metode “fileSelected”. File diposting ke server dan metode “ProcessRequest” dipanggil di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Berdasarkan parameter formulir yang diteruskan, file yang akan diunggah disimpan di server, mengatur ulang data menggunakan metode “ResetData” dan metode “ImageConverter” dipanggil. Metode ImageConverter, mengonversi file yang diunggah menjadi gambar menggunakan Aspose.PDF for .NET dan mengembalikan kontrol ke metode “fileSelected” di Editor.js.

Memperbarui konten kanvas setelah mengunggah file

Setelah file dihasilkan di server, kontrol dikembalikan ke metode “fileSelected” di Editor.js yang memperbarui konten editor yaitu mengatur ulang kanvas, memuat file yang baru diunggah.

Menambahkan Halaman dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat menambahkan halaman baru dalam file PDF menggunakan opsi Tambah Halaman dari bilah menu. Menggunakan fitur ini, Anda dapat menambahkan halaman kosong ke file PDF Anda. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Tambah Halaman” diklik di halaman

Ketika Anda mengklik “Item menu Tambah Halaman”, metode “AddPage” dipanggil di file Editor.js.

jQuery - Mengirim permintaan Ajax ke server untuk metode AddPage_Click.

Lihat tab Editor.js di bawah untuk kode sumber metode AddPage, yang memanggil metode AddPage_Click di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode AddPage_Click. Ini menambahkan halaman kosong baru dalam file PDF menggunakan kelas Aspose.Pdf.Document. Setelah menambahkan halaman ke file PDF, halaman tersebut dikonversi menjadi gambar untuk ditampilkan di editor. Kontrol kemudian dikembalikan ke file Editor.js yang memperbarui penomoran halaman dalam metode AddPage.

Menghapus Halaman dari File PDF

Menggunakan Html5 PDF Editor, Anda dapat menghapus halaman dari file PDF menggunakan opsi Hapus Halaman dari bilah menu. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Hapus Halaman” diklik di halaman

Ketika Anda mengklik “Item menu Hapus Halaman”, metode DeletePage dipanggil di file Editor.js.

jQuery - Mengirim permintaan Ajax ke server untuk metode DeletePage_Click.

Lihat tab Editor.js di bawah untuk kode sumber metode DeletePage, yang memanggil metode DeletePage_Click di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode DeletePage_Click. Ini menghapus halaman yang dipilih dari file PDF menggunakan metode Delete dari koleksi Aspose.Pdf.Document.Page.

Memperbarui konten pengeditan

Setelah menghapus halaman dari file PDF, kontrol kemudian dikembalikan ke metode DeletePage di file Editor.js yang memperbarui penomoran halaman, menghapus koleksi yang terkait dengan halaman yang dihapus menggunakan metode updateIndexesDelete.

Memindahkan Halaman dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat memindahkan halaman dalam file PDF menggunakan opsi Pindah Halaman dari bilah menu. Setelah Anda menekan item menu Pindah Halaman, Anda akan disajikan dengan dialog input untuk menentukan lokasi baru halaman yang dipilih. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Pindah Halaman” diklik di halaman

Ketika Anda mengklik “Item menu Pindah Halaman”, dialog input ditampilkan untuk mendapatkan lokasi baru halaman yang dipilih. Setelah memberikan nomor halaman dan menekan tombol “Pindah”, metode “Move” dipanggil di file Editor.js.

jQuery - Mengirim permintaan Ajax ke server untuk metode MovePages.

Lihat tab Editor.js di bawah untuk kode sumber metode Move, yang memanggil metode MovePage dan meneruskan detail seperti pindah dari, pindah ke, daftar halaman ke metode MovePages di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode MovePages. Ini menggunakan koleksi Aspose.Pdf.Document.Pages untuk memindahkan halaman.

Memperbarui konten pengeditan

Setelah memindahkan halaman, kontrol kemudian dikembalikan ke metode MovePage di file Editor.js yang memperbarui indeks halaman dan informasi terkait dengan berbagai koleksi di editor menggunakan metode MoveUpdate.

Menyisipkan Teks dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat menyisipkan teks dalam file PDF menggunakan opsi Mode Teks dari bilah menu. Setelah Anda memilih item menu Mode Teks dan mengklik lokasi mana pun di editor tempat Anda ingin menambahkan teks, Anda akan disajikan dengan dialog input untuk memasukkan dan memformat teks yang diinginkan seperti yang ditunjukkan di bawah ini:

Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Mode Teks” dipilih di halaman

Ketika Anda memilih “Item menu Mode Teks” dan mengklik lokasi yang diinginkan di editor untuk menyisipkan teks dalam file PDF, dialog input ditampilkan untuk mendapatkan teks yang perlu Anda sisipkan di halaman. Setelah memberikan teks dan menekan tombol “OK”, metode “saveTextFromArea” dipanggil di file Editor.js.

Javascript - Mendapatkan teks input dari dialog input dan menampilkannya di editor.

Lihat tab Editor.js di bawah untuk kode sumber metode saveTextFromArea, yang mendapatkan teks dari dialog input dan menampilkannya di editor. Juga, ini menyimpan data dalam koleksi bentuk yang kemudian digunakan di sisi server untuk menyisipkan teks dalam file PDF. Anda dapat memeriksa kode sumber metode saveFile yang dipanggil saat file disimpan.

Metode web ASP.NET menangani permintaan server

Seperti yang disebutkan di atas, teks sebenarnya akan disisipkan ke dalam file PDF sumber kami ketika kami melakukan operasi simpan yang menggunakan metode GetTextStamp untuk membuat cap teks untuk disisipkan dalam file PDF. Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode GetTextStamp. Ini menggunakan kelas Aspose.Pdf.TextStamp untuk menyisipkan teks dalam file PDF.

Menyoroti Teks dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat menyoroti teks dalam file PDF menggunakan opsi Mode Sorot dari bilah menu. Setelah Anda memilih item menu Mode Sorot, Anda dapat menyoroti teks dan area mana pun menggunakan alat sorot persegi panjang. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Mode Sorot” dipilih di halaman

Ketika Anda memilih “Item menu Mode Sorot”, Anda dapat menggambar sorotan persegi panjang di sekitar teks atau item mana pun dalam file PDF Anda. Implementasi proses ini dapat dilihat dalam metode “tools.rect” di file Editor.js.

Javascript - Menggambar persegi panjang sorot di editor.

Lihat tab Editor.js di bawah untuk kode sumber metode tool.rect, yang memungkinkan pengguna menggambar persegi panjang sorot di lokasi mana pun di editor. Juga, ini menyimpan data dalam koleksi bentuk yang kemudian digunakan di sisi server untuk menyisipkan sorotan dalam file PDF sumber. Anda dapat memeriksa kode sumber metode saveFile yang dipanggil saat file disimpan.

Metode web ASP.NET menangani permintaan server

Seperti yang disebutkan di atas, sorotan sebenarnya disisipkan ke dalam file PDF sumber kami ketika kami melakukan operasi simpan yang menggunakan metode GetImageStamp untuk menyisipkan cap gambar dalam file PDF sumber di lokasi yang ditentukan di editor. Lihat tab Canvas.aspx.cs di bawah dengan kode sumber metode GetImageStamp. Ini menggunakan kelas Aspose.Pdf.ImageStamp untuk menyisipkan persegi panjang sorot dalam file PDF.

Mencari Teks dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat mencari teks dalam file PDF menggunakan opsi Cari Teks dari bilah menu. Setelah Anda mengklik item menu Cari Teks, Anda akan disajikan dengan kotak dialog untuk memasukkan teks yang akan dicari seperti yang ditunjukkan di bawah ini:

Setelah memberikan teks dan menekan cari, semua instance dari kata yang dicari akan disorot seperti yang ditunjukkan di bawah ini:

HTML - “Item menu Cari Teks” diklik di halaman

Ketika Anda mengklik “Item menu Cari Teks”, Anda disajikan dengan dialog input untuk memasukkan teks yang ingin Anda cari. Setelah memasukkan teks dan menekan tombol cari, metode “Move” dipanggil yang memeriksa apakah operasi pindah halaman dilakukan atau operasi pencarian dilakukan dan kemudian memanggil metode performSearch di file Editor.js.

jQuery - Mengirim permintaan server Ajax untuk metode SearchData

Lihat tab Editor.js di bawah untuk kode sumber metode performSearch, yang mendapatkan teks input dan permintaan ke metode server SearchData di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Menggunakan teks input yang diteruskan dari metode performSearch, metode SearchData menggunakan kelas Aspose.Pdf.Text.TextFragmentAbsorber untuk mencari semua instance dari teks input dalam file PDF sumber kami dan kelas System.Drawing.Brush untuk menggambar sorotan terhadap teks yang dicari. Setelah data dicari, file hasil dikonversi lagi menjadi gambar dan dimuat di editor.

Mengganti Teks dalam File PDF

Menggunakan Html5 PDF Editor, Anda dapat mengganti teks yang ada dalam file PDF menggunakan opsi Ganti Teks dari bilah menu. Setelah Anda mengklik item menu Ganti Teks, Anda akan disajikan dengan kotak dialog untuk memasukkan teks yang akan dicari dan diganti.

HTML - “Item menu Ganti Teks” diklik di halaman

Ketika Anda mengklik “Item menu Ganti Teks”, Anda disajikan dengan dialog input untuk memasukkan teks yang akan dicari dan diganti. Setelah memasukkan teks dan menekan tombol Ganti, metode “ReplaceText” dipanggil di file Editor.js.

jQuery - Mengirim permintaan server Ajax untuk metode ReplaceText

Lihat tab Editor.js di bawah untuk kode sumber metode ReplaceText, yang mendapatkan teks input dari dialog teks input dan permintaan ke metode server ReplaceText di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Metode ReplaceText menggunakan kelas Aspose.Pdf.Text.TextFragmentAbsorber untuk mencari semua instance dari teks yang akan diganti dalam file PDF sumber kami dan mengganti semua instance dengan teks yang diganti. Setelah teks diganti, file hasil dikonversi lagi menjadi gambar dan dimuat di editor.

Memuat File PDF dengan Kolom Formulir

Menggunakan Html5 PDF Editor, Anda dapat memuat dan bekerja dengan file PDF yang berisi kolom formulir. Setelah file dengan kolom formulir dimuat di editor, semua kolom formulir dimuat untuk diedit. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Buka Dari Komputer” diklik di halaman.

Ketika Anda mengklik “Item menu Buka Dari Komputer”, Anda dapat mengunggah file input yang berisi kolom formulir menggunakan dialog unggah file. Setelah file diunggah, metode “fileSelected” dipanggil di file Editor.js.

jQuery - Mengirim permintaan server untuk metode ProcessRequest

File diposting ke server dan metode “ProcessRequest” dipanggil di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Berdasarkan parameter formulir yang diteruskan, file yang akan diunggah disimpan di server, metode ImageConverter, mengonversi file yang diunggah menjadi gambar dan metode “CheckFields” dipanggil yang menggunakan kelas Aspose.Pdf.InteractiveFeatures.Forms untuk memeriksa semua kolom formulir dan mengumpulkan informasi mengenai kolom tersebut yaitu FieldType, Lokasi, dll. dan mengembalikan koleksi kolom kembali ke metode ImageConverter. Metode ImageConverter mengembalikan kontrol ke metode “fileSelected” di Editor.js.

Memuat kolom formulir di kanvas

Menyoroti Kolom Formulir yang Diperlukan

Menggunakan Html5 PDF Editor, Anda dapat menyoroti kolom formulir yang diperlukan di editor. Setelah file dengan kolom formulir dimuat di editor, semua kolom formulir yang diperlukan disorot untuk membantu pengguna dalam pengeditan. Di bagian berikutnya, kami akan membahas rincian teknis di balik fitur ini.

HTML - “Item menu Buka Dari Komputer” diklik di halaman.

jQuery - Mengirim permintaan server untuk metode ProcessRequest

File diposting ke server dan metode “ProcessRequest” dipanggil di file CanvasSave.aspx.cs.

Metode web ASP.NET menangani permintaan server

Lihat tab Canvas.aspx.cs di bawah. Berdasarkan parameter formulir yang diteruskan, file yang akan diunggah disimpan di server, metode ImageConverter, mengonversi file yang diunggah menjadi gambar dan metode “CheckFields” dipanggil yang menggunakan kelas Aspose.Pdf.InteractiveFeatures.Forms untuk memeriksa semua kolom formulir dan mengumpulkan informasi mengenai kolom tersebut yaitu FieldType, Lokasi, dll. Setelah mendapatkan detail dari semua kolom formulir, kami mendapatkan informasi apakah kolom formulir adalah kolom formulir yang diperlukan menggunakan metode Aspose.Pdf.Facades.IsRequiredField dan mengembalikan koleksi kolom kembali ke metode ImageConverter. Metode ImageConverter mengembalikan kontrol ke metode “fileSelected” di Editor.js.

Memuat kolom formulir di kanvas

Lihat tab Editor.js di bawah, metode manageFields di Editor.js digunakan untuk menghasilkan semua kolom di kanvas berdasarkan informasi yang dikirim kembali dari sisi server. Ini menggambar kontrol kolom HTML menggunakan tipe dan informasi lokasi dari sisi server ke kanvas. Jika kolom tertentu diperlukan, ia menggunakan div (disebut sebagai pembungkus) di sekitar kontrol dan mengubah properti warna latar belakang div untuk menunjukkan bahwa itu adalah kolom yang diperlukan yang disorot.

Render WebForms DataGridView ke PDF