使用 Vue.js 和 JavaScript 在 Web 应用程序中下载 PDF 文件

海拥

发布于 2023-05-02 17:27:40

2.6K0

发布于 2023-05-02 17:27:40

文章被收录于专栏：全栈技术全栈技术

在本文中，我们将学习如何使用 Vue.js 和 JavaScript 创建一个从 Web 前端应用程序下载 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() {
      // 创建<a>元素以下载PDF
      const link = document.createElement('a');
      link.href = this.pdfUrl;
      link.target = '_blank';
      link.download = this.pdfFileName;

      // 模拟点击<a>元素
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

该组件有两个属性：pdfUrl和pdfFileName。pdfUrl是你要下载的 PDF 文件的路径，而pdfFileName是将在浏览器的下载窗口中显示的文件的名称。downloadPdf函数负责创建指向 PDF 文件的“a”链接并模拟点击它，触发文件下载。

使用组件

现在我们已经创建了组件，我们可以在应用程序的任何地方使用它。为此，我们只需导入组件并将其包含在我们希望下载按钮出现的 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>

在此示例中，我们导入了DownloadPdfButton组件并使用标签。我们还在 Vue 实例中创建了两个变量（pdfUrl和pdfFileName），我们将它们作为属性传递给组件。这些变量分别表示PDF文件的路径和文件名。

在 Vue 可组合格式中

下面是一个示例，说明如何在 Vue.js 中创建用于下载 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>

在此示例中，可组合的 useDownloadPdf返回一个函数downloadPdf，该函数将 PDF 文件的位置作为参数。downloadPdf函数使用href、target 和 download属性创建一个“a”链接，然后将其添加到文档主体并模拟点击该链接。

要在你的组件中使用此可组合项，你只需导入它并调用downloadPdf函数，将 PDF 文件的位置作为参数传递。

<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>

在此示例中，组件导入useDownloadPdf可组合项并在其设置方法中调用downloadPdf函数，将 PDF 文件位置作为参数传递。模板中的下载按钮在单击时调用downloadPdf方法。