如何獲取url中的參數並傳遞給iframe中的報表

来源:http://www.cnblogs.com/laoA188/archive/2016/11/24/6098580.html
-Advertisement-
Play Games

在使用報表軟體時,用戶系統左邊一般有目錄樹,點擊報表節點就會在右側網頁的iframe中顯示出報表,同時點擊的時候也會傳遞一些參數給網頁,比如時間和用戶信息等。如何使網頁中的報表能夠獲取到傳遞過來的參數呢? ...


在使用報表軟體時,用戶系統左邊一般有目錄樹,點擊報表節點就會在右側網頁的iframe中顯示出報表,同時點擊的時候也會傳遞一些參數給網頁,比如時間和用戶信息等。如何使網頁中的報表能夠獲取到傳遞過來的參數呢?以下用報表軟體FineReport簡單介紹一些。

具體實現過程

將報表生成頁面時,給網頁添加onload事件,首先獲取url中的參數,然後嫁接到iframe的src上,或者通過獲得的參數拼接處完整的報表url賦給iframe的src。

<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
	function autoLoad(){
		//返回從問號 (?) 開始的 URL(查詢部分)
		var paraString = location.search;   
		//多個參數用&分隔,將參數字元串轉為數組,使每個參數值存於一個數組元素中
		var paras = paraString.split("&");  
		//每個數組元素中"="後面的值即參數值
		var reportName = paras[0].substr(paras[0].indexOf("=") + 1); 
		var area = paras[1].substr(paras[1].indexOf("=") + 1);
		var province = paras[2].substr(paras[2].indexOf("=") + 1);
		var city = paras[3].substr(paras[3].indexOf("=") + 1);
		//使用獲取的參數值拼接出最終的url
		var reportURL = "/WebReport/ReportServer?reportlet=" + reportName + "&area=" + area + "&province=" + province + "&city=" + city;
		//url中可能包含中文或特殊字元因此需要進行編碼轉換,註意需要先引入finereport.js
		reportURL = FR.cjkEncode(reportURL);
		//將新的報表路徑賦給報表所在iframe的src
		document.getElementById("reportFrame").src = reportURL; 
	}
	//載入網頁時調用autoLoad方法
	window.onload = autoLoad;
</script>
</head>
<body>
<iframe id="reportFrame" width="900" height="400"></iframe>
</body>
</html>

 將代碼保存為geturlpara.html,保存在工程下的page_demo文件夾下。

使用管理員登錄決策平臺,點擊管理系統>報表管理,點擊添加鏈接,鏈接路徑為:page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=華東&province=江蘇&city=無錫,名稱為:url參數傳遞給iframe中的報表,如下圖:

 

這樣刷新fs,就可以看到左側目錄樹中多了一個節點,點擊該節點後,就可以在右側網頁的iframe中顯示出報表包括傳遞給網頁的參數。

效果查看

如下圖,點擊左側“url參數傳給iframe中的報表”節點時,即打開相對應的鏈接,對應網頁就會在中間區域顯示出來:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px; color: white; border- ...
  • 本demo應用了css3 transition animate,若有相容性問題,請升級你的瀏覽器! 這次先讓大家玩玩! 結構層 表現層 動畫的屬性值可以隨便調。 骰子的每個面的公共樣式 點數容器的公共樣式 行為層 <!doctype html> <html> <head> <meta charset ...
  • 今天向博客園申請開通JS功能,很快就得到了批准(速度超贊)。得到許可權後,花了點時間研究了一下如何修改博客導航欄的內容。由於博客園後臺並沒有給我們開通修改導航的功能,所以我們只能另闢蹊徑,利用我們學到的JavaScript知識,人工修改下導航內容。 先來看代碼: 然後,我們把寫好的js代碼,在管理界面 ...
  • 瞭解移動web像素的知識,主要是為了切圖時心中有數。本文主要圍繞一個問題:怎樣根據設備廠商提供的屏幕尺寸和物理像素得到我們切圖需要的邏輯像素?圍繞這個問題以iphone5為例講解涉及到的web像素相關知識。 一、前置知識 1、 iphone5的相關參數 iPhone 5 處理器 蘋果A6處理器,1. ...
  • CSS是一種用於屏幕上渲染html,xml等一種語言,CSS主要是在相應的元素中應用樣式,來渲染相對應用的元素,那麼這樣我們選擇相應的元素就很重要了,如何選擇對應的元素,此時就需要我們所說的選擇器。選擇器主要是用來確定html的樹形結構中的DOM元素節點。我把CSS選擇器分開成三部分,第一部分是我們 ...
  • 一、HTML5canvas的學習與鞏固 1、第一次:canvas繪製象棋盤(笨方法)示例代碼: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>canvas繪圖_象棋棋盤</title> 7 </head ...
  • # 前言 本文非vue教程,僅為學習vue過程中的個人理解與筆記,有說的不正確的地方歡迎指正討論# 1、computed計算屬性函數中不能使用vm變數在計算屬性的函數中,不能使用Vue構造函數返回的vm變數,因為此時vm還未返回,依然處於Vue內部構造函數過程中,遂只能使用this來代替vm。若要使... ...
  • ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...