创建组件
首先，我们将创建一个 Vue.js 组件，其中包含单击按钮时下载 PDF 文件的必要逻辑。
代码语言：javascript复制<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 代码中。这是一个例子：
代码语言：javascript复制<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 的可组合项：
代码语言：javascript复制<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方法。
结论
现在你知道了如何使用 Vue.js 和 JavaScript 在前端 Web 应用程序中创建下载 PDF 文件的功能。在这两种情况下，代码都可以更短，具体取决于你更喜欢在 Vue 中使用哪种语法。我希望本文对你有用，并且你可以在未来的项目中应用此功能。
