在 Vue.js 中，通过 FileReader API 可导入本地 PDF 文件：创建 FileReader 对象。监听 "load" 事件。使用 readAsDataURL 读取文件数据。处理读取结果，获取 PDF 数据。存储 PDF 数据。在模板中嵌入 PDF 文件。
如何导入本地 PDF 文件至 Vue.js
在 Vue.js 中导入本地 PDF 文件需要使用 FileReader API。以下是详细步骤：
1. 创建 FileReader 对象
<code class="javascript">const fileReader = new FileReader();</code>
2. 监听 load 事件
立即学习“前端免费学习笔记（深入）”；
load 事件会在文件读取完成时触发。
<code class="javascript">fileReader.addEventListener('load', (e) => { ... });</code>3. 从选中文件中读取数据
使用 readAsDataURL 方法从文件中读取数据。
<code class="javascript">fileReader.readAsDataURL(file);</code>
4. 处理读取结果
在 load 事件处理程序中，可以使用 result 属性访问读取的数据。
<code class="javascript">const pdfData = e.target.result;</code>
5. 存储 PDF 数据
您可以将读取的 PDF 数据存储在 Vuex 状态管理中或本地存储中，以便稍后使用。
6. 在模板中使用 PDF 数据
您可以使用 <object> 元素在模板中嵌入 PDF 文件。
<code class="html"><object data={pdfData} type="application/pdf" width="100%" height="100%"></object></code>示例代码：
<code class="javascript">const vueApp = new Vue({
methods: {
importPDF(e) {
const file = e.target.files[0];
const fileReader = new FileReader();
fileReader.addEventListener('load', (e) => {
const pdfData = e.target.result;
// 存储 PDF 数据并进行处理
});
fileReader.readAsDataURL(file);
},
},
});</code><code class="html"><template> <input type="file" @change="importPDF"> <object v-if="pdfData" :data="pdfData" type="application/pdf" width="100%" height="100%"></object> </template></code>
