Tukar html kepada javascript perkataan

Javascript Word Penukaran HTML: Laksanakan penukaran format dokumen ringkas

Dengan perkembangan pesat Internet dan teknologi elektronik, pemprosesan dokumen menjadi lebih biasa dan lebih mudah. Sama ada anda memuat turun dokumen dari Internet atau mengedit dokumen dalam persekitaran pejabat, menukar antara format yang berbeza telah menjadi tugas yang mesti diselesaikan.

Antaranya, penukaran yang paling biasa antara format dokumen ialah penukaran antara HTML dan Word. HTML, sebagai bahasa penanda hiperteks, sering digunakan dalam reka bentuk web, manakala Word ialah alat pemprosesan dokumen yang paling banyak digunakan di pejabat peribadi.

Dalam artikel ini, kami akan meneroka cara menggunakan Javascript untuk merealisasikan fungsi menukar HTML kepada Word, dan berkongsi beberapa pengalaman praktikal dan beberapa kemahiran praktikal.

1. Perbezaan antara HTML dan Word

Sebelum kita mula membincangkan cara menukar HTML kepada Word, kita perlu memahami beberapa perbezaan antara HTML dan Word.

HTML adalah berasaskan teks Ia menggunakan tag untuk mewakili elemen dan gaya yang berbeza. Tag ini boleh ditulis dalam editor teks atau perisian pembangunan web dan akhirnya disimpan dalam bentuk fail.

Word adalah berdasarkan WYSIWYG, yang bermaksud ia ialah editor WYSIWYG dengan antara muka pengguna yang kaya dan alatan pemformatan dokumen. Word boleh menjana gaya dan reka letak teks yang kaya, dan menyokong banyak ciri lanjutan lain, seperti penomboran automatik, jadual automatik dan editor formula, dsb.

Menukar HTML kepada Word memerlukan banyak pemformatan dan pelarasan struktur kerana perbezaan penting antara kedua-duanya.

2. Kaedah untuk menukar HTML kepada Word

Kaedah menukar HTML kepada Word terbahagi terutamanya kepada dua kategori: penukaran manual dan penukaran automatik terprogram. Penukaran manual memerlukan menyalin dan menampal kandungan HTML secara manual ke dalam Word. Walaupun ini adalah penyelesaian yang berdaya maju, ia memerlukan banyak masa dan usaha, dan hasil penukaran selalunya tidak seperti yang diharapkan.

Sebaliknya, kaedah penukaran automatik boleh dilaksanakan melalui bahasa pengaturcaraan, yang boleh meningkatkan kecekapan dan kualiti kerja. Antaranya, Javascript mempunyai rangkaian aplikasi yang luas, baik dalam bahagian hadapan dan bahagian belakang Web, dan boleh membantu kami mencapai penukaran kepada dan daripada format HTML dan Word.

Di sini, kami akan memberi tumpuan kepada cara menukar fail HTML kepada dokumen Word menggunakan Javascript.

(1) Gunakan perpustakaan JsZip untuk pembungkusan

Pertama, kita perlu memuat turun dan memperkenalkan perpustakaan JsZip untuk menjana dokumen Word. JsZip ialah perpustakaan Javascript untuk membuat dan membaca fail zip, yang boleh membantu kami membungkus berbilang fail ke dalam satu fail.

(2) Buat templat dokumen Word

Sukar untuk mencipta dokumen Word standard, tetapi untuk menjimatkan masa dan tenaga, kami boleh mencipta templat dokumen Word yang mengandungi apa yang kami mahu Gaya dan struktur tetapan.

Dokumen Word terdiri daripada XML dan fail binari lain Kami hanya perlu mengekstrak fail XML Word untuk membuat templat untuk penyuntingan. Langkah ini boleh dicapai dengan membungkus fail Word kosong dan melihat kandungan XML di dalamnya.

(3) Gantikan kandungan teks dan tetapkan gaya

Setelah kami mempunyai templat dokumen Word, kami boleh menggunakan Javascript untuk membukanya dan menggantikan kandungan dan gaya teks. Kita boleh menggunakan Model Objek Dokumen (DOM) untuk mengekalkan gaya dan struktur dokumen, atau menggunakan gaya yang dipratentukan dalam dokumen Word.

(4) Eksport fail Word

Buat fail Zip baharu dan simpan fail templat dan gantikan kandungan ke dalamnya, kemudian namakannya dalam format fail .docx.

3. Contoh Kod

Di bawah ialah contoh kod Javascript ringkas yang menunjukkan cara menukar HTML kepada Word. Kami akan menggunakan sintaks HTML5 dan ES6, dan kod tersebut perlu diletakkan dalam penyemak imbas yang menyokong teknologi terkini ini untuk dijalankan.

// 创建一个JSZip实例
let zip = new JSZip();

// 从一个URL加载一个HTML文件
fetch('https://www.example.com/example.html')
    .then((res) => {
        return res.text();
    })
    .then((html) => {
        // 创建Word文档模板
        let template = jsZipUtils.getBinaryContent('template.docx', (error, content) => {
            if (error) {
                throw error;
            }
            else {
                let zip = new JSZip(content);
            }
        });

        // 将HTML转换为纯文本
        let text = html.replace(/<[^>]*>/g, '');

        // 使用正则表达式替换Word文档中的CSS样式，并将其保存
        template.file('word/styles.xml', template.file('word/styles.xml').asText().replace(/<w:rPr></w:rPr>/gi, '<w:rPr><w:vertAlign w:val="superscript" /></w:rPr>'));

        // 使用正则表达式替换Word文档中的标记，并将其添加到新的Word文档中
        template.file('word/document.xml', template.file('word/document.xml').asText().replace(/[.*?]/g, text));

        // 将新的Word文档保存到本地
        zip.generateAsync({type: 'blob'}).then((content) => {
            saveAs(content, 'example.docx');
        });
    });

Di atas adalah ringkasan dan pengalaman praktikal artikel ini, saya harap ia dapat membantu anda merealisasikan fungsi menukar HTML kepada Word dan meningkatkan kecekapan dan kualiti kerja.

Atas ialah kandungan terperinci Tukar html kepada javascript perkataan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!