دانلود فایل PDF در یک برنامه وب با Vue.js و جاوا اسکریپت.

در این مقاله یاد خواهید گرفت که چگونه با استفاده از Vue.js و جاوا اسکریپت، گزینه ای برای دانلود یک فایل PDF از یک برنامه وب پیشانی ایجاد کنید. تابع به دست آمده یک جزء قابل استفاده مجدد خواهد بود که می تواند در هر نقطه از برنامه شما استفاده شود.

ایجاد کامپوننت

ابتدا یک کامپوننت Vue.js ایجاد می کنیم که حاوی منطق لازم برای دانلود یک فایل PDF با کلیک روی یک دکمه است.

<template>
  <div>
    <button @click="downloadPdf">download PDF</button>
  </div>
</template>

<script>
export default {
  name: 'DownloadPdfButton',
  props: {
    pdfUrl: {
      type: String,
      required: true
    },
    pdfFileName: {
      type: String,
      required: true
    }
  },
  methods: {
    downloadPdf() {
      // create element <a> for download PDF
      const link = document.createElement('a');
      link.href = this.pdfUrl;
      link.target="_blank";
      link.download = this.pdfFileName;

      // Simulate a click on the element <a>
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

این جزء دارای دو ویژگی است: pdfUrl و pdfنام فایل. pdfUrl مسیر فایل PDF است که می خواهید دانلود کنید، در حالی که pdfنام فایل نام فایلی است که در پنجره دانلود مرورگر نمایش داده می شود. را دانلود پی دی اف تابع مسئول ایجاد یک “آ” پیوندی که به فایل PDF اشاره می کند و یک کلیک روی آن را شبیه سازی می کند و باعث دانلود فایل می شود.

با استفاده از کامپوننت

اکنون که کامپوننت را ایجاد کرده‌ایم، می‌توانیم آن را در هر جایی از برنامه خود استفاده کنیم. برای انجام این کار، ما به سادگی کامپوننت را وارد می کنیم و آن را در کد HTML جایی که می خواهیم دکمه دانلود ظاهر شود قرار می دهیم. در اینجا یک مثال است:

<template>
  <div>
    <h1>Mi proyecto frontend</h1>
    <download-pdf-button :pdf-url="pdfUrl" :pdf-file-name="pdfFileName" />
  </div>
</template>

<script>
import DownloadPdfButton from '@/components/DownloadPdfButton.vue';

export default {
  name: 'MyProject',
  components: {
    DownloadPdfButton
  },
  data() {
    return {
      pdfUrl: '/path/to/my/file.pdf',
      pdfFileName: 'my-pdf-file.pdf'
    };
  }
};
</script>

در این مثال، ما را وارد کرده ایم دانلود پی دی اف دکمه جزء و با استفاده از آن در کد HTML گنجانده شده است برچسب زدن ما همچنین دو متغیر در نمونه Vue ایجاد کرده ایم (pdfUrl و pdfنام فایل) که به عنوان ویژگی به کامپوننت ارسال می کنیم. این متغیرها به ترتیب مسیر فایل PDF و نام فایل را نشان می دهند.

<script>
export default function useDownloadPdf() {
  function downloadPdf(pdfUrl) {
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.target="_blank";
    link.download = 'my-pdf-file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  return {
    downloadPdf,
  };
}
</script>

<template>
  <div>
    <button @click="downloadPdf('/path/to/my/file.pdf')">Descargar PDF</button>
  </div>
</template>

<script>
import useDownloadPdf from './useDownloadPdf';

export default {
  name: 'MyComponent',
  setup() {
    const { downloadPdf } = useDownloadPdf();

    return {
      downloadPdf,
    };
  },
};
</script>