嵌入式 powerbi 报告未显示移动视图 [英] Mobile view is not being shown for embedded powerbi report
问题描述
我们创建了一个包含桌面版和移动版的 PowerBI 报告.当我们在输入正确信息后在以下示例站点进行测试时，它可以正确显示桌面和手机视图.
https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html
但是当我们在移动设备上打开网站时，它仍然显示报告的桌面版本.powerbi.js 文件使用的文件版本为'powerbi-client v2.5.1'.
下面提供了所使用的 HTML 和 javascript我们还附加了&isMobile=true"和嵌入的报告网址.我们是否缺少任何显示移动版本的参考.
<头><身体><div id="reportContainer" style="width: 100%; height: 610px" aria-atomic="True" aria-multiline="True" aria-multiselectable="True" aria-orientation="vertical"><script src="~/Scripts/powerbi.js"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNGt4="crossorigin="anonymous"></script><脚本>$(document).ready(function() {var txtAccessToken = "@Model.EmbedToken.Token";var txtEmbedUrl = "@Html.Raw(Model.EmbedUrl)";var txtEmbedReportId = "@Model.Id";var tokenType = $('input:radio[name=tokenType]:checked').val();var models = window['powerbi-client'].models;var 权限 = models.Permissions.All;变量配置 = {类型:'报告'，tokenType: tokenType == '0' ?models.TokenType.Aad :models.TokenType.Embed，accessToken: txtAccessToken,embedUrl: txtEmbedUrl,id: txtEmbedReportId,权限:权限，设置:{布局类型:models.LayoutType.MobilePortrait}};//获取对嵌入报表 HTML 元素的引用var embedContainer = $('#reportContainer')[0];//嵌入报表并将其显示在 div 容器中.var 报告 = powerbi.embed(embedContainer, config);//Report.off 删除给定的事件处理程序(如果存在).report.off("加载");//Report.on 将添加一个打印到日志窗口的事件处理程序.report.on(加载"，函数(){Log.logText("已加载");});report.on(错误"，函数(事件){Log.log(event.detail);report.off("错误");});report.off("保存");report.on(保存"，功能(事件){Log.log(event.detail);如果(event.detail.saveAs){Log.logText('为了与新报告交互，创建一个新令牌并加载新报告');}});});</html>
问题已解决.我在配置的 embededUrl 属性中附加 isMobile=true.
report.EmbedUrl = report.EmbedUrl + "&isMobile=true";
我们不需要显式附加&isMobile=true"，这个参数会在 iframe url 中自动更新.
We have created a PowerBI report having both the desktop verion and mobile virson. Its showing desktop and pone view properly when we are testing at following sample site after putting correct information.
https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html
But when we open the website on mobile It is still showing the desktop version of the report. File version used of powerbi.js file is 'powerbi-client v2.5.1'.
The HTML and javascript used is provided below We are also appending '&isMobile=true' with embed report url. Are we missing any reference to show the mobile version.
<html>
<head>
</head>
<body>
<div id="reportContainer" style="width: 100%; height: 610px" aria-atomic="True" aria-multiline="True" aria-multiselectable="True" aria-orientation="vertical">
</div>
<script src="~/Scripts/powerbi.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var txtAccessToken = "@Model.EmbedToken.Token";
var txtEmbedUrl = "@Html.Raw(Model.EmbedUrl)";
var txtEmbedReportId = "@Model.Id";
var tokenType = $('input:radio[name=tokenType]:checked').val();
var models = window['powerbi-client'].models;
var permissions = models.Permissions.All;
var config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
layoutType: models.LayoutType.MobilePortrait
}
};
// Get a reference to the embedded report HTML element
var embedContainer = $('#reportContainer')[0];
// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);
// Report.off removes a given event handler if it exists.
report.off("loaded");
// Report.on will add an event handler which prints to Log window.
report.on("loaded", function() {
Log.logText("Loaded");
});
report.on("error", function(event) {
Log.log(event.detail);
report.off("error");
});
report.off("saved");
report.on("saved", function(event) {
Log.log(event.detail);
if (event.detail.saveAs) {
Log.logText('In order to interact with the new report, create a new token and load the new report');
}
});
});
</script>
</body>
</html>
Issue is resolved. I was appending isMobile=true in embededUrl property of configuration.
report.EmbedUrl = report.EmbedUrl + "&isMobile=true";
We need not to append "&isMobile=true" explicitly, this parameter will be updated in the iframe url automatically.
这篇关于嵌入式 powerbi 报告未显示移动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
