Tutorial: Gunakan Vue dan HTMLDocx untuk menjana gaya dan reka letak dokumen Word yang boleh disesuaikan dengan cepat-View.js-php.cn

Rumah

hujung hadapan web

View.js

Tutorial: Gunakan Vue dan HTMLDocx untuk menjana gaya dan reka letak dokumen Word yang boleh disesuaikan dengan cepat

王林

Jul 21, 2023 am 11:06 AM

vue dokumen perkataan htmldocx

Tutorial: Gunakan Vue dan HTMLDocx untuk menjana gaya dan reka letak dokumen Word yang boleh disesuaikan dengan pantas

Pengenalan:
Dalam kerja dan pembelajaran harian, kita selalunya perlu menjana dokumen dalam pelbagai format, yang mana dokumen Word adalah yang paling biasa. Tutorial ini akan memperkenalkan cara menggunakan Vue dan perpustakaan HTMLDocx untuk menjana gaya dan reka letak dokumen Word yang boleh disesuaikan dengan cepat. Melalui tutorial ini, anda akan belajar cara menggunakan gabungan HTML dan Vue untuk mencipta dokumen Word yang kaya dan pelbagai.

1. Persediaan

Buat projek Vue
Pertama, kita perlu mencipta projek Vue. Buka terminal, masukkan folder tempat anda ingin mencipta projek, dan kemudian jalankan arahan berikut:
```
vue create word-docx-generator
```
Salin selepas log masuk
Pilih konfigurasi yang diperlukan mengikut gesaan dan tunggu projek dibuat.
Pasang perpustakaan HTMLDocx
Jalankan arahan berikut dalam folder projek untuk memasang perpustakaan HTMLDocx:
```
npm install htmldocx
```
Salin selepas log masuk
Dengan cara ini kita boleh menggunakan perpustakaan HTMLDocx dalam projek untuk menjana dokumen Word.

2. Tulis kod

Buat komponen Vue
Buat fail bernama WordGenerator.vue dalam direktori src projek, dan tulis kod berikut dalam fail:
rreee

dan komponen Pengenalan

Cari fail index.js dalam folder penghala dalam direktori src projek, tambah kod berikut:

<template>
  <div>
 <button @click="generateDocx">生成Word文档</button>
  </div>
</template>

<script>
import {saveAs} from 'file-saver';
import htmlDocx from 'htmldocx';

export default {
  methods: {
 generateDocx() {
   const docxContent = `
     <html>
       <head>
         <style>
           body {
             font-family: Arial, sans-serif;
           }
           h1 {
             color: red;
           }
           p {
             font-size: 12px;
           }
         </style>
       </head>
       <body>
         <h1>这是一个标题</h1>
         <p>这是一段文本。</p>
       </body>
     </html>
   `;
   
   const convertedDocx = htmlDocx.asBlob(docxContent);
   saveAs(convertedDocx, 'generated.docx');
 }
  }
}
</script>

Salin selepas log masuk

Ubah suai App.vue

Cari fail App.vue dalam direktori src projek, dan gantikan kandungannya dengan Kod berikut:

import WordGenerator from '@/WordGenerator.vue';

const routes = [
  {
 path: '/',
 name: 'WordGenerator',
 component: WordGenerator
  }
];

export default new VueRouter({
  mode: 'history',
  routes
});

Salin selepas log masuk

3. Jalankan projek

Jalankan arahan berikut dalam terminal untuk memulakan projek:

<template>
  <div id="app">
 <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Salin selepas log masuk

Kemudian lawati http://localhost:8080 dalam pelayar, anda akan melihat butang. Selepas mengklik butang, dokumen Word bernama generated.docx akan dijana secara automatik.

4 Sesuaikan gaya dan reka letak

Dalam contoh di atas, kami menggunakan teg