详细步骤
1.修改 PreviewApi 函数:
- 设置 responseType 为 ‘arraybuffer’,以接收二进制数据。
export const PreviewApi = (data) => request({
method: 'post',
url: '/dev-api/preview',
responseType: 'arraybuffer',
data
});
3.处理响应:
- 使用 new Uint8Array(response.data) 将 ArrayBuffer 转换为 Uint8Array。
- 使用 Blob 构造函数将 Uint8Array 转换为 Blob 对象。
- 使用 URL.createObjectURL 方法生成 Blob URL。
- 使用 window.open 方法在新窗口中打开生成的 Blob URL。
<template>
<div>
<button @click="onPreview(row)">预览 PDF</button>
</div>
</template>
<script>
import { ldjtPreviewApi } from '@/api/your-api-file'; // 引入你的 API 文件
export default {
data() {
return {
row: { qqlsh: 'example_qqlsh' } // 示例数据,实际使用时从父组件或其他地方获取
};
},
methods: {
onPreview(row) {
ldjtPreviewApi({ qqlsh: row.qqlsh }).then((response) => {
if (response.status === 200) {
const binaryData = new Uint8Array(response.data);
const url = this.binaryToPdfUrl(binaryData);
console.log('Generated URL:', url);
window.open(url);
} else {
this.$message({
message: '请求失败',
type: 'error'
});
}
}).catch((error) => {
this.$message({
message: error.message || '请求出错',
type: 'error'
});
})
},
binaryToPdfUrl(binaryData) {
const blob = new Blob([binaryData], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
return url;
}
}
};
</script>
<style scoped>
/* 你可以在这里添加一些样式 */
</style>
手动验证二进制数据
你可以将二进制数据保存为文件,手动打开验证 PDF 文件是否有效。以下是一个示例代码:
function binaryToPdfFile(binaryData, filename) {
const blob = new Blob([binaryData], { type: 'application/pdf' });
// 创建一个临时的下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
// 调用函数,将二进制数据保存为 PDF 文件
binaryToPdfFile(new Uint8Array(response.data), 'test.pdf');