Rumah >hujung hadapan web >tutorial js >Cara Mengesan dan Menyimpan Dokumen ke PDF dengan HTMLnd JavaScript

Cara Mengesan dan Menyimpan Dokumen ke PDF dengan HTMLnd JavaScript

Linda Hamilton
Linda Hamiltonasal
2024-12-19 11:30:12327semak imbas

Merakam dan menyimpan dokumen, seperti resit, invois dan kontrak, kerana fail PDF adalah keperluan biasa untuk kebanyakan perniagaan. Dalam artikel ini, kami meningkatkan projek editor dokumen web kami yang dibina dengan Dynamsoft Document Viewer dengan menambahkan keupayaan untuk mengesan dan menyimpan dokumen sebagai PDF. Ciri pengesanan dokumen dikuasakan oleh Dynamsoft Capture Vision.

Video Demo: Kesan dan Simpan Dokumen ke PDF

Demo Dalam Talian

https://yushulx.me/web-document-annotation/

Prasyarat

  • Lesen Percubaan Dynamsoft Capture Vision: Dapatkan lesen percubaan percuma selama 30 hari untuk membuka kunci keupayaan penuh Produk Dynamsoft.

  • Dynamsoft Document Viewer: SDK JavaScript ini membolehkan paparan lancar PDF, JPEG, PNG, TIFF, dan Fail BMP. Ia juga menampilkan pemaparan dan penjimatan anotasi PDF. Muat turunnya di sini: https://www.npmjs.com/package/dynamsoft-document-viewer.

  • Dynamsoft Capture Vision Bundle: SDK JavaScript ini menyediakan pengesanan dokumen, pemangkasan dan fungsi peningkatan imej. Muat turunnya di sini: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

Melaksanakan Ciri Pengesanan dan Pembetulan Dokumen dalam HTML5 dan JavaScript

Bahagian berikut membimbing anda melalui pelaksanaan pengesanan dokumen dan fungsi pembetulan menggunakan HTML5 dan JavaScript. Jika anda telah memuat turun kod sumber, anda boleh melangkau ke Langkah 2.

Langkah 1: Dapatkan Kod Sumber

  1. Klon kod sumber daripada repositori GitHub:

    git clone https://github.com/yushulx/web-twain-document-scan-management.git
    
  2. Navigasi ke direktori document_annotation:

    cd web-twain-document-scan-management/examples/document_annotation
    
  3. Buka projek dalam Kod Visual Studio.

Langkah2: Tambah Butang Pengesanan Dokumen

  1. Dalam main.css, tambahkan ikon bahan untuk butang pengesanan dokumen:

    .icon-document_scanner::before {
        content: "crop_free";
    }
    
    .icon-document_scanner {
        display: flex;
        font-size: 1.5em;
    }
    
    

    How to Detect and Save Documents to PDF with HTMLnd JavaScript

  2. Tentukan butang pengesanan dokumen dan tambahkannya pada bar alat dalam main.js:

    const documentButton = {
        type: Dynamsoft.DDV.Elements.Button,
        className: "material-icons icon-document_scanner",
        tooltip: "Detect document",
        events: {
            click: "detectDocument",
        }
    }
    
    const pcEditViewerUiConfig = {
        type: Dynamsoft.DDV.Elements.Layout,
        flexDirection: "column",
        className: "ddv-edit-viewer-desktop",
        children: [
            {
                type: Dynamsoft.DDV.Elements.Layout,
                className: "ddv-edit-viewer-header-desktop",
                children: [
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            Dynamsoft.DDV.Elements.ThumbnailSwitch,
                            Dynamsoft.DDV.Elements.Zoom,
                            Dynamsoft.DDV.Elements.FitMode,
                            Dynamsoft.DDV.Elements.Crop,
                            Dynamsoft.DDV.Elements.Filter,
                            Dynamsoft.DDV.Elements.Undo,
                            Dynamsoft.DDV.Elements.Redo,
                            Dynamsoft.DDV.Elements.DeleteCurrent,
                            Dynamsoft.DDV.Elements.DeleteAll,
                            Dynamsoft.DDV.Elements.Pan,
                            Dynamsoft.DDV.Elements.AnnotationSet,
                            qrButton,
                            checkButton,
                            scanButton,
                            clearButton,
                            signatureButton,
                            documentButton,
                        ],
                    },
                    {
                        type: Dynamsoft.DDV.Elements.Layout,
                        children: [
                            {
                                type: Dynamsoft.DDV.Elements.Pagination,
                                className: "ddv-edit-viewer-pagination-desktop",
                            },
                            loadButton,
                            downloadButton,
                        ],
                    },
                ],
            },
            Dynamsoft.DDV.Elements.MainView,
        ],
    };
    
  3. Tambah pengendali acara klik untuk butang pengesanan dokumen:

    editViewer.on("detectDocument", detectDocument);
    
    async function detectDocument() {
        ...
    }
    

Langkah 3: Cipta Dialog Pop Timbul untuk Pengesanan dan Normalisasi Dokumen

Dialog pop timbul untuk pengesanan dan penormalan dokumen termasuk tiga butang: Kesan, Normalkan dan Batal.

  • Kesan: Kesan sempadan dokumen.
  • Normalkan: Normalkan dokumen.
  • Batal: Tutup dialog.

Kod HTML

git clone https://github.com/yushulx/web-twain-document-scan-management.git

Langkah 4: Edit Mata Sudut Dokumen dan Perbetulkan Dokumen

  1. Kesan dokumen dan lukis kontur berdasarkan empat titik sudut dalam pemapar edit:

    cd web-twain-document-scan-management/examples/document_annotation
    
  2. Normalkan imej dokumen:

    .icon-document_scanner::before {
        content: "crop_free";
    }
    
    .icon-document_scanner {
        display: flex;
        font-size: 1.5em;
    }
    
    

    How to Detect and Save Documents to PDF with HTMLnd JavaScript

Kod Sumber

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation

Atas ialah kandungan terperinci Cara Mengesan dan Menyimpan Dokumen ke PDF dengan HTMLnd JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Konteks, Redux atau Komposisi?Artikel seterusnya:Konteks, Redux atau Komposisi?