老实说，

前言

在生物信息学项目中。经常需要查看测序数据在基因组上的比对情况。传统方式通常使用桌面版 IGV。但对于 Web 程序使用者更希望直接在浏览器中查看 BAM 文件，而无需额外下载软件。不过，

者还会遇到以下痛点：

• 跨域请求导致 BAM 无法访问。
• 频繁创建/销毁浏览器实例导致内存泄漏与性能卡顿。
• Token 验证机制缺失，无法安全访问受保护的 BAM/BAI 文件。
• Dialog 弹窗未及时渲染导致 IGV 渲染异常。不过，
• 定位到指定基因区时页面跳转缓慢或失败。

这篇文章记录如何在 Vue3 + Pinia + Element Plus 项目中集成 IGV.js实现：

• BAM 文件在线浏览
• 基因区域快速跳转
• 动态切换样本
• Token 权限认证
• Dialog 弹窗展示

一、什么是 IGV.js

IGV.js 是 Broad Institute 开源的 Web 版基因组浏览器。

官网：

GitHub：

主要特点：

• Pure front‑end。no backend parsing.

二、安装

npm install igv

三、Pinia 封装 IGV Store

为了避免页面频繁创建和销毁 IGV Browser，可以统一放入 Pinia 中管理。

igv.js Store 示例

import { defineStore } from 'pinia';import igv from 'igv';import { getToken } from '@/utils/auth';export const useIgvStore = defineStore => {
let browser = null;说起来，async function init {
if return browser;browser = await igv.createBrowser(dom。{
genome这方面，'hg38',locus: value,tracks:
});}
async function loadTrack {
if return;const track = {
name这方面，'BAM',type: 'alignment',format: 'bam',url: `${import.meta.env.VITE_APP_BASE_URL}/analysis/locusScreening/bam/${libraryCode}`。indexURL: `${import.meta.env.VITE_APP_BASE_URL}/analysis/locusScreening/bai/${libraryCode}`,headers: { Authorization: `Bearer ${getToken}` }
};browser.removeTrackByName;
await browser.loadTrack;}
function goto {
if browser.search;}
function destroy {
if {
browser.dispose;browser = null;不过，}
}
return { browser。init,loadTrack,goto,destroy };})，

四、主要功能解析

初始化浏览器

browser = await igv.createBrowser(dom。{
从genome来看，"hg38",locus : value,});其实，

参数	说明
genome	参考基因组
locus	初始定位区域
tracks	初始轨道配置

BAM 轨道加载示例

{
name这方面。"BAM",type:"alignment",format:"bam"
}

IGV.js 会自动读取对应的 BAI 并显示数据。

Token 权限认证示例

headers:{
Authorization:Bearer ${getToken}
}

动态切换样本示例代码：

await loadTrack;await loadTrack;
内部实现这方面，

browser.removeTrackByName;await browser.loadTrack;

# 使用者体验提高：一次创建。多次切换，无需重载整个界面！**

# 性能调整：避免重复实例造成内存泄漏。**

---

# 基因区域跳转封装： js goto;**适用于表格点击位点 / VCF 列表 / SNP 详情联动。**

---

# 常见场景：

表格行点击时直接调用 openDialog 并传递所需参数。

---

对于变异筛查程序而言，可进一步 再看以下功能，

• VCF Track
• BED 注释
• Gene Track
• BigWig 覆盖率
• 多样本对比
• 截图导出
• 位点联动分析

---

通过 Vue ³ + Pinia + Element Plus 与 IGV.js 的深度整合。你可以轻松建立一个 Web 版 的：

✅ 在线 BAM 浏览 ✅ BAI 索引支持 ✅ Token 验证安全访问 ✅ Pinia 状态管理共享单实例 ✅ 动态切换样本无刷新体验 ✅ 基因区快速定位及交互

这些功能大幅降低了传统桌面软件部署成本，为肿瘤分析、生物变异筛查还有遗传病诊断提供了强有力的数据可视化支持。

---