base_ui/components/other/ButtonWordExport.vue

<template>
  <div class="export-word">
    <div class="button-word">
      <button class="btn" @click="exportFileDocx" v-tooltip="tooltip">
        <svg class="icon icon-docx-file">
          <use xlink:href="#icon-docx-file"></use>
        </svg>
      </button>
    </div>
  </div>
</template>

<script>
import {
  Document,
  Paragraph,
  Packer,
  TextRun,
  ImageRun,
  ExternalHyperlink,
  Footer,
} from "docx";
import { saveAs } from "file-saver";
import QRCode from "qrcode";

export default {
  props: {
    texts: {
      type: Array,
      required: true,
    },
    fileName: {
      type: String,
      default: "sample.docx",
    },
    font: {
      type: String,
      default: "Tahoma",
    },
    fontSize: {
      type: Number,
      default: 18,
    },
    tooltip: {
      type: String,
      default: "دانلود فایل ورد",
    },
    wordTitle: {
      type: String,
      default: "سامانه قانون یار",
    },
    wordTitleLink: {
      type: String,
      default: location.origin,
    },
    QRCodeLink: {
      type: String,
      default: location.origin,
    },
    qrCodeWidth: {
      type: Number,
      default: 100,
    },
    qrCodeHeight: {
      type: Number,
      default: 100,
    },
    wordSubTitle: {
      type: String,
      default: "",
    },
  },
  methods: {
    async exportFileDocx() {
      const qrCodeDataUrl = await QRCode.toDataURL(this.QRCodeLink);
      const doc = new Document({
        sections: [
          {
            // footers: {
            //   default: new Footer({
            //     children: [
            //       new Paragraph({
            //         alignment: AlignmentType.CENTER,
            //         spacing: {
            //           after: 200,
            //         },
            //         children: [
            //           new TextRun({
            //             text: "قانون یار",
            //             color: "CCCCCC",
            //             bold: true,
            //             size: 100,
            //             allCaps: true,
            //             font: this.font,
            //           }),
            //         ],
            //       }),
            //     ],
            //   }),
            // },
            children: [
              new Paragraph({
                alignment: "center",
                spacing: {
                  after: 200,
                },
                children: [
                  new ExternalHyperlink({
                    children: [
                      new TextRun({
                        text: this.wordTitle,
                        font: this.font,
                        size: 28,
                        color: "#008000",
                        bold: true,
                      }),
                    ],
                    link: this.wordTitleLink,
                  }),
                ],
              }),

              new Paragraph({
                alignment: "left",
                children: [
                  new ImageRun({
                    data: qrCodeDataUrl,
                    transformation: {
                      width: this.qrCodeWidth,
                      height: this.qrCodeHeight,
                    },
                  }),
                ],
              }),

              new Paragraph({
                alignment: "right",
                spacing: {
                  before: 100,
                  after: 300,
                },
                children: [
                  new TextRun({
                    text: this.wordSubTitle,
                    font: this.font,
                    size: 24,
                    bold: true,
                    color: "#000000",
                  }),
                ],
              }),
              new Paragraph({
                alignment: "right",
                children: [
                  new ExternalHyperlink({
                    children: [
                      new TextRun({
                        text: this.QRCodeLink,
                        font: this.font,
                        size: 20,
                        color: "#0000FF",
                        underline: true,
                      }),
                    ],
                    link: this.QRCodeLink,
                  }),
                ],
              }),
              new Paragraph({
                border: {
                  bottom: {
                    style: "single",
                    size: 4,
                    color: "000000",
                  },
                },
                spacing: {
                  before: 200,
                  after: 200,
                },
              }),

              ...this.texts.map((text) => {
                return new Paragraph({
                  alignment: "right",
                  spacing: {
                    after: 200,
                    line: 480,
                  },
                  children: [
                    new TextRun({
                      text: text,
                      font: this.font,
                      size: this.fontSize,
                    }),
                  ],
                });
              }),
            ],
          },
        ],
      });

      Packer.toBlob(doc).then((blob) => {
        saveAs(blob, this.fileName);
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>