如何将本地Tableau报表嵌入到HTML

Question

I'm trying to use javascript + html to embed one Tableau report into a webpage, and create some buttons/bars to interact with it.

However, I'm stuck in the first step: displaying the report.

I've learnt the first example here: http://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.htm .

The example works well. I can see the Tableau report displayed in the webpage and all the buttons/controls work fine.

So I made a little change in the javascript function initializeViz() , in order to display my report in the same way, as below:

function initializeViz() {              
            var placeholderDiv = document.getElementById("tableauViz");
            var url = "file://localhost/C:/reports/Resilience.twb";
            var options = {
                width: placeholderDiv.offsetWidth,
                height: placeholderDiv.offsetHeight * 20,
                hideTabs: true,
                hideToolbar: true,
                onFirstInteractive: function () {
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
                }
            };

            viz = new tableau.Viz(placeholderDiv, url, options);
        }

The above function stops displaying anything. I've checked the local file link file://localhost/C:/reports/Resilience.twb in my browser and it works.

So I'm really confused, as I've made only the minimum change, and the URL link to local file works, then what could cause the problem? Please help me out, any idea is appreciated.

Answer 1

are you sure your representation of the path is correct? You do say C:/reports/Resilience.twb exists but the localhost type paths usually are of the form file:///localhost:port/path/ and the C: seems odd to me to be there. Try using Run from the start menu (on Windows) and typing in '\\localhost\\' and navigate from there to find the full path.

EDIT : As far as I can see you cannot display a desktop dashboard file on a webpage . You have to publish it to a tableau server. So your URL will have to point to a view rather than a file. I made a local copy of the training page and amended the var options (height) as you have done above and tested it with the tutorial view and another I have access to and it works in both cases.

Check this doc: http://onlinehelp.tableau.com/current/online/en-us/embed.htm