Overview

SpreadJS supports Excel-like hyperlinks, which give the user the ability to quickly open up links from inside worksheet cells with simple JavaScript API.

For quick access to related information in another file or on a web page, you can insert a hyperlink in a worksheet cell. You can set hyperlink by using setHyperlink, for example: If you want to get the hyperlink data of a cell, you can use getHyperlink, for example: The hyperlink has these keys: Key Value Type Explain url string Indicates the location that the hyperlink points to. Our hyperlink supports many protocols, such as: http/https/ftp/file/mailto... Besides, we also support url start with "sjs://" which referer to a worksheet location. tooltip string Indicates the tooltip message which shows when hover over the cell with hyperlink. linkColor string Indicates the fore color before the link visited. Default is #0066cc. visitedLinkColor string Indicates the fore color after the link visited. Default is #3399ff. target number Indicates the way that user open the hyperlinked document. Default is 0 /* blank */. drawUnderline boolean Indicates whether draw the underline for the cell have hyperlink. Default is true. command string | function Indicates the behaviour when clicking the hyperlink rather than default opening url. If you type a link to a cell, we also support auto create the hyperlink for you. There is a option allowAutoCreateHyperlink in spread options. We support to auto create hyperlink by default. If you don't like this, you can set allowAutoCreateHyperlink to false.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet :autoGenerateColumns="autoGenerateColumns"></gc-worksheet> </gc-spread-sheets> <div class="options-container"> <strong class="sp-demo-HeaderTitle">Settings:</strong> <p id="settingString">Set the hyperlink data for a cell:</p> <fieldset> <div id="settingsDiv"> <div class="option-row"> <label for="hyperlinkURL">URL:</label> <input type="text" id="hyperlinkURL" placeholder="https://www.grapecity.com/" /> </div> <div class="option-row"> <label for="tooltip">Tooltip:</label> <input type="text" id="tooltip" placeholder="GrapeCity" /> </div> <div class="option-row"> <label for="linkColor">Link Color:</label> <input type="text" id="linkColor" placeholder="#0066cc" /> </div> <div class="option-row"> <label for="visitedLinkColor">Visited Link Color:</label> <input type="text" id="visitedLinkColor" placeholder="#3399ff" /> </div> <div class="option-row"> <label for="hyperlinkTarget">Target:</label> <select id="hyperlinkTarget" name="hyperlinkTarget"> <option value="0">blank</option> <option value="1">self</option> <option value="2">parent</option> <option value="3">top</option> </select> </div> <div class="option-row"> <label for="drawUnderline">Draw Underline:</label> <input type="checkbox" id="drawUnderline" /> </div> <div class="option-row"> <button id="setHyperlinkButton" @click="setHyperlinkButtonClicked($event)" >Set Hyperlink</button> </div> </div> </fieldset> <div id="allowAutoCreateHyperlinkDiv"> <div class="option-row"> <label for="allowAutoCreateHyperlink">Allow auto create hyperlink:</label> <input id="allowAutoCreateHyperlink" type="checkbox" @change="allowAutoCreateHyperlink($event)" checked="checked" /> </div> </div> </div> </div> </template> <script> import Vue from "vue"; import "@grapecity/spread-sheets-vue"; import GC from "@grapecity/spread-sheets"; import "./styles.css"; let App = Vue.extend({ name: "app", data: function() { return { autoGenerateColumns: true, spread: null }; }, methods: { initSpread: function(spread) { this.spread = spread; spread.suspendPaint(); let sheet = spread.getActiveSheet(); this.sheet = sheet; sheet.setText(1, 1, "SpreadJS Demo Link"); sheet.setText(2, 1, "https://www.grapecity.com/spreadjs/demos"); let hyperlinkForUrl = {}; hyperlinkForUrl.url = "https://www.grapecity.com/spreadjs/demos"; sheet.setHyperlink(2, 1, hyperlinkForUrl); sheet.setText(5, 1, "Link with tooltip"); sheet.setText(6, 1, "https://www.grapecity.com/spreadjs/demos"); let hyperlinkForTooltip = {}; hyperlinkForTooltip.url = "https://www.grapecity.com/spreadjs/demos"; hyperlinkForTooltip.tooltip = "GrapeCity SpreadJS Demos"; sheet.setHyperlink(6, 1, hyperlinkForTooltip); sheet.setText(9, 1, "Change link foreColor"); sheet.setText(10, 1, "https://www.grapecity.com/spreadjs/demos"); let hyperlinkForForeColor = {}; hyperlinkForForeColor.url = "https://www.grapecity.com/spreadjs/demos"; hyperlinkForForeColor.tooltip = "GrapeCity SpreadJS Demos"; hyperlinkForForeColor.linkColor = "red"; sheet.setHyperlink(10, 1, hyperlinkForForeColor); sheet.setText(13, 1, "Change link visited color"); sheet.setText(14, 1, "https://www.grapecity.com/spreadjs/demos"); let hyperlinkForVisitedColor = {}; hyperlinkForVisitedColor.url = "https://www.grapecity.com/spreadjs/demos"; hyperlinkForVisitedColor.tooltip = "GrapeCity SpreadJS Demos"; hyperlinkForVisitedColor.visitedLinkColor = "green"; sheet.setHyperlink(14, 1, hyperlinkForVisitedColor); sheet.setText(17, 1, "Link without underline"); sheet.setText(18, 1, "https://www.grapecity.com/spreadjs/demos"); let hyperlinkWithoutUnderline = {}; hyperlinkWithoutUnderline.url = "https://www.grapecity.com/spreadjs/demos"; hyperlinkWithoutUnderline.tooltip = "GrapeCity SpreadJS Demos"; hyperlinkWithoutUnderline.drawUnderline = false; sheet.setHyperlink(18, 1, hyperlinkWithoutUnderline); spread.resumePaint(); }, setHyperlinkButtonClicked: function(e) { this.spread.suspendPaint(); let hyperlink = {}; let sheet = this.sheet; hyperlink.url = document.getElementById('hyperlinkURL').value; hyperlink.tooltip = document.getElementById('tooltip').value; hyperlink.linkColor = document.getElementById('linkColor').value; if (hyperlink.linkColor === "") { hyperlink.linkColor = undefined; } hyperlink.visitedLinkColor = document.getElementById('visitedLinkColor').value; if (hyperlink.visitedLinkColor === "") { hyperlink.visitedLinkColor = undefined; } hyperlink.target = document.getElementById('hyperlinkTarget').value; hyperlink.drawUnderline = document.getElementById('drawUnderline').checked; let row = sheet.getActiveRowIndex(); let col = sheet.getActiveColumnIndex(); sheet.setHyperlink(row, col, hyperlink); this.spread.resumePaint(); }, allowAutoCreateHyperlink: function(e) { this.spread.suspendPaint(); this.spread.options.allowAutoCreateHyperlink = e.target.checked; this.spread.resumePaint(); }, } }); new Vue({ render: h => h(App) }).$mount("#app"); </script>
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
export function getData() { return [{ "Country": "United Kingdom", "State": "England", "City": "Basildon", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United Kingdom", "State": "England", "City": "London", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United Kingdom", "State": "England", "City": "Manchester", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United Kingdom", "State": "England", "City": "London", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United Kingdom", "State": "England", "City": "Newbury", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United Kingdom", "State": "England", "City": "Kemble", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United Kingdom", "State": "England", "City": "Headley", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United Kingdom", "State": "England", "City": "Southampton", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United Kingdom", "State": "England", "City": "Cheltenham", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United Kingdom", "State": "England", "City": "Bournemouth", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United Kingdom", "State": "Northern Ireland", "City": "Helens Bay", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "MO", "City": "Parkville", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "OR", "City": "Astoria", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "AL", "City": "Cahaba Heights", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "NJ", "City": "Mickleton", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "NJ", "City": "Riverside", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "NJ", "City": "Clinton", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "IL", "City": "Peoria", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "IL", "City": "Morton", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "IL", "City": "Flossmoor", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "IL", "City": "Genoa", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "TN", "City": "Martin", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "TN", "City": "Memphis", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "NY", "City": "New York", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "NY", "City": "New York", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "NY", "City": "New York", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "NY", "City": "Brooklyn", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "NY", "City": "New Rochelle", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "NY", "City": "Staten Island", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "TX", "City": "Shavano Park", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "TX", "City": "Sugar Land", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "TX", "City": "Houston", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "TX", "City": "Houston", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "TX", "City": "Lakewood Village", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "ID", "City": "Eagle", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "UT", "City": "Salt Lake City", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "CA", "City": "Chula Vista", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "CA", "City": "Los Gatos", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "CA", "City": "Santa Monica", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "CA", "City": "Irvine", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "CA", "City": "San Francisco", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "United States", "State": "FL", "City": "Miami", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "FL", "City": "Delray Beach", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "FL", "City": "Fort Lauderdale", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "United States", "State": "FL", "City": "Amelia Island", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "FL", "City": "Coral Gables", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "FL", "City": "Miami", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "FL", "City": "Parkland", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "VA", "City": "Reston", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "VA", "City": "Keller", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "VA", "City": "Keller", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "AZ", "City": "Phoenix", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "VT", "City": "Pittsfield", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "VT", "City": "Pittsfield", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "GA", "City": "Ball Ground", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "United States", "State": "GA", "City": "Sandy Springs", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "IA", "City": "Ankeny", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "NC", "City": "Pittsboro", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "OH", "City": "Beachwood", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "OH", "City": "Cincinnati", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "NH", "City": "W Lebanon", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "MD", "City": "Woodsboro", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United States", "State": "Michigan", "City": "Farmington", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "United States", "State": "HI", "City": "Honolulu", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "United States", "State": "CO", "City": "Englewood", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "United States", "State": "KY", "City": "Owensboro", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Australia", "State": "Victoria", "City": "Echuca", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Australia", "State": "Victoria", "City": "Melbourne", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "Australia", "State": "Queensland", "City": "Burpengary", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Australia", "State": "Queensland", "City": "Gold Coast", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Israel", "State": "Tel Aviv", "City": "Tel Aviv", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "France", "State": "Ile-de-France", "City": "Chatou", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "France", "State": "Upper Normandy", "City": "Rouen", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Netherlands", "State": "Noord-Brabant", "City": "Eindhoven", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Netherlands", "State": "Noord-Holland", "City": "Badhoevedorp", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "Ireland", "State": "Meath", "City": "Julianstown", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Ireland", "State": "Cork", "City": "Ballynora", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Ireland", "State": "Dublin", "City": "Kinsaley", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Ireland", "State": "Dublin", "City": "Rathgar", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "Canada", "State": "Ontario", "City": "Ottawa", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "Canada", "State": "Ontario", "City": "Belleville", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Canada", "State": "Ontario", "City": "Alliston", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "Canada", "State": "British Columbia", "City": "Maple Ridge District Municipality", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Canada", "State": "British Columbia", "City": "Comox", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Canada", "State": "British Columbia", "City": "Vancouver", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Canada", "State": "British Columbia", "City": "Vancouver", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Canada", "State": "British Columbia", "City": "Tsawwassen", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "Canada", "State": "Saskatchewan", "City": "Prince Albert", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Canada", "State": "Alberta", "City": "Red Deer", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Canada", "State": "Alberta", "City": "Calgary", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Canada", "State": "Alberta", "City": "Calgary", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "Canada", "State": "Alberta", "City": "Okotoks", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "India", "State": "Andhra Pradesh", "City": "Hyderabad", "Product": "Teddy Grahams Crackers", "Detail": "Honey 10-Ounce Boxes 6-Pack" }, { "Country": "South Africa", "State": "Gauteng", "City": "Roodepoort", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Finland", "State": "Ita-Suomen Laani", "City": "Kuopio", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Switzerland", "State": "Geneve", "City": "Vesenaz", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Switzerland", "State": "Vaud", "City": "Lausanne", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Switzerland", "State": "Vaud", "City": "Morges", "Product": "Kraft Real Mayo", "Detail": "30 Ounces" }, { "Country": "Denmark", "State": "Frederiksborg", "City": "Helsingor", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Denmark", "State": "Kobenhavn", "City": "Kobenhavn", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "Denmark", "State": "Storstrom", "City": "Nakskov", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "Belgium", "State": "Brussels (Bruxelles)", "City": "Brussels", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Sweden", "State": "Stockholm", "City": "Saltsjobaden", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Norway", "State": "Rogaland", "City": "Stavanger", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Norway", "State": "Oslo", "City": "Oslo", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Luxembourg", "State": "Luxembourg", "City": "Gasperich", "Product": "Planters Deluxe Whole Cashew", "Detail": "18.25 Ounce" }, { "Country": "Italy", "State": "Lombardy", "City": "Milan", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Germany", "State": "Nordrhein-Westfalen", "City": "Telgte", "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", "Detail": "Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher" }, { "Country": "Moldova", "State": "Chisinau", "City": "Bubuieci", "Product": "Smartfood Popcorn", "Detail": "White Cheddar 9 Ounce" }, { "Country": "Spain", "State": "Murcia", "City": "La Alberca", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }, { "Country": "United Arab Emirates", "State": "Dubayy", "City": "Jumeira", "Product": "KIND Bars Almond & Coconut Gluten Free", "Detail": "1.4 Ounce Bars 12 Count" }, { "Country": "Bahrain", "State": "Al Manamah", "City": "Al 'Adliyah", "Product": "Kraft Grated Parmesan Cheese", "Detail": "24 oz" }]; }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .options-container legend { text-align: center; } .option-row { font-size: 14px; padding: 5px; } input { display:block; width: 100%; margin: 8px 0; box-sizing: border-box; } label, input { padding: 4px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } #drawUnderline { display: inline-block; width: 30px; } #drawUnderlineLabel { display: inline-block; } #allowAutoCreateHyperlink { display: inline-block; width: 30px; } #setHyperlinkButton { font-weight: bold; background-color: #ecf3ff; width: 200px; height: 35px; border-radius: 4px; border-color: #0b93d5; border-width: thin; } #settingsDiv { margin-top: "10px" } #settingString { padding:"2px 10px } #allowAutoCreateHyperlinkDiv { margin-top: "10px" }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-vue': 'npm:@grapecity/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);