如何修改HTML将文本输入作为URL参数传入PowerBI报表？

你的代码存在几个关键问题导致无法正常工作：

• 变量x的定义写在HTML结构中而非<script>标签内，会引发语法错误，且页面加载时就获取输入框值，无法拿到用户后续输入的内容。
• <a>标签直接使用固定URL，没有触发自定义的JavaScript逻辑，无法动态替换参数。
• PowerBI的过滤参数格式需要确保变量正确嵌入，同时要处理字符串的引号转义。

修正后的完整代码 #

<html>
<body>
<div class="pageContent">
    <div class="form-group has-feedback">
        <label class="control-label" for="inputSuccess2">Project Number:</label>
        <input type="text" class="form-control" id="inputSuccess2" />
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </div>
    <script type="text/javascript">
        function openPowerBIReport() {
            // 点击时才获取输入框的当前值
            const projectNumber = document.getElementById("inputSuccess2").value.trim();
            if (!projectNumber) {
                alert("请输入项目编号");
                return;
            }
            // 构造PowerBI的过滤URL，注意引号转义
            const powerBIUrl = `https://app.powerbi.com/report?filter=Dashboard/Project eq '${encodeURIComponent(projectNumber)}'`;
            // 在新窗口打开链接
            window.open(powerBIUrl, "_blank");
        }
    </script>
    <div class="jrow">
        <div class="card-container">
            <div class="card card-block">
                <img src="/Images/PowerBI_65x50_rounded.png">
                <div class="card-title-container">
                    <!-- 将a标签的href改为javascript:void(0)，点击时调用自定义函数 -->
                    <h4 class="card-title" style="padding-left: 5px; display: inline-block;">
                        <a href="javascript:void(0)" onclick="openPowerBIReport()" target="_blank">Reporting Tool</a>
                    </h4>
                </div>
                <p class="card-text">Track Forecast, Baseline, Earned and Actual Hours</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

关键修改说明 #

• 将变量获取逻辑移到函数内部：点击链接时才获取输入框的当前值，确保拿到用户最新输入的内容，同时添加了空值校验，避免空参数跳转。
• 修改<a>标签的行为：将href设为javascript:void(0)阻止默认跳转，通过onclick事件调用自定义函数openPowerBIReport。
• 正确构造PowerBI URL：使用模板字符串拼接URL，并用encodeURIComponent处理项目编号，避免特殊字符导致URL失效。
• 函数命名更具语义化：openPowerBIReport比searchURL更清晰表达功能。

内容的提问来源于stack exchange，提问作者jbroutier