在 Vue.js 中，通过 FileReader API 可导入本地 PDF 文件：创建 FileReader 对象。监听 "load" 事件。使用 readAsDataURL 读取文件数据。处理读取结果，获取 PDF 数据。存储 PDF 数据。在模板中嵌入 PDF 文件。
如何导入本地 PDF 文件至 Vue.js
在 Vue.js 中导入本地 PDF 文件需要使用 FileReader API。以下是详细步骤：
1. 创建 FileReader 对象
const fileReader = new FileReader();
2. 监听 load 事件
立即学习“前端免费学习笔记（深入）”；
load 事件会在文件读取完成时触发。
fileReader.addEventListener('load', (e) => { ... });3. 从选中文件中读取数据
使用 readAsDataURL 方法从文件中读取数据。
fileReader.readAsDataURL(file);
4. 处理读取结果
在 load 事件处理程序中，可以使用 result 属性访问读取的数据。
const pdfData = e.target.result;
5. 存储 PDF 数据
您可以将读取的 PDF 数据存储在 Vuex 状态管理中或本地存储中，以便稍后使用。
6. 在模板中使用 PDF 数据
您可以使用 元素在模板中嵌入 PDF 文件。
示例代码：
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);
},
},
});
