From 5ff34627b567dd36687ca9f66f8d9b370d8b18c8 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 11 Jul 2024 04:53:02 +0530 Subject: [PATCH] Integrated latest changes at 07-11-2024 4:30:09 AM --- .../app-composition.vue | 43 +++ .../open-from-blobdata-cs1/app.vue | 53 ++++ .../open-from-blobdata-cs1/index.css | 13 + .../open-from-blobdata-cs1/index.html | 21 ++ .../open-from-blobdata-cs1/index.js | 35 +++ .../open-from-blobdata-cs1/systemjs.config.js | 44 +++ .../save-as-blobdata-cs1/app-composition.vue | 57 ++++ .../spreadsheet/save-as-blobdata-cs1/app.vue | 73 +++++ .../spreadsheet/save-as-blobdata-cs1/data.js | 238 ++++++++++++++++ .../save-as-blobdata-cs1/index.css | 13 + .../save-as-blobdata-cs1/index.html | 21 ++ .../spreadsheet/save-as-blobdata-cs1/index.js | 48 ++++ .../save-as-blobdata-cs1/systemjs.config.js | 44 +++ ej2-vue/pdfviewer/how-to/add-save-button.md | 265 ++++++++++++++++++ ej2-vue/pivotview/getting-started.md | 77 +++-- ej2-vue/spreadsheet/open-save.md | 158 +++++++++++ 16 files changed, 1186 insertions(+), 17 deletions(-) create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.css create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.html create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.js create mode 100644 ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/systemjs.config.js create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/data.js create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.css create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.html create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.js create mode 100644 ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js create mode 100644 ej2-vue/pdfviewer/how-to/add-save-button.md diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app-composition.vue b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app-composition.vue new file mode 100644 index 000000000..ff66d944a --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app-composition.vue @@ -0,0 +1,43 @@ + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue new file mode 100644 index 000000000..bdba11c72 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue @@ -0,0 +1,53 @@ + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.css b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.css new file mode 100644 index 000000000..4d063fcea --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.css @@ -0,0 +1,13 @@ +.custom-btn { + margin-bottom: 10px; +} + + + + + + + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.html b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.html new file mode 100644 index 000000000..161613118 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.html @@ -0,0 +1,21 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.js b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.js new file mode 100644 index 000000000..85bac1064 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/index.js @@ -0,0 +1,35 @@ + +import Vue from "vue"; +import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet"; +Vue.use(SpreadsheetPlugin); + +var base64String = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,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"; + +new Vue({ + el: '#app', + template: `
+ + +
+`, + + data: () => { + return { + openUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save' + } + }, + methods: { + created: function () { + var spreadsheet = this.$refs.spreadsheet; + // To obtain blob data from base64 string. + fetch(base64String) + .then((response) => response.blob()) + .then((fileBlob) => { + // To convert obtained blob data as a file. + var file = new File([fileBlob], 'Sample.xlsx'); + spreadsheet.open({ file: file }); + }); + } + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/systemjs.config.js b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/systemjs.config.js new file mode 100644 index 000000000..c30a648e0 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/open-from-blobdata-cs1/systemjs.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-spreadsheet": "syncfusion:ej2-vue-spreadsheet/dist/ej2-vue-spreadsheet.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue new file mode 100644 index 000000000..5effb5bad --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue @@ -0,0 +1,57 @@ + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue new file mode 100644 index 000000000..d7d898741 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue @@ -0,0 +1,73 @@ + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/data.js b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/data.js new file mode 100644 index 000000000..4dcff7cc3 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/data.js @@ -0,0 +1,238 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.data = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.css b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.css new file mode 100644 index 000000000..4d063fcea --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.css @@ -0,0 +1,13 @@ +.custom-btn { + margin-bottom: 10px; +} + + + + + + + + + + diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.html b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.html new file mode 100644 index 000000000..161613118 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.html @@ -0,0 +1,21 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.js b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.js new file mode 100644 index 000000000..489a83241 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/index.js @@ -0,0 +1,48 @@ + +import Vue from "vue"; +import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet"; +import { data } from './data.js'; +Vue.use(SpreadsheetPlugin); + + +new Vue({ + el: '#app', + template: `
+ + + + + + + + + + + + + + + + + +
+`, + + data: () => { + return { + dataSource: data, + openUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save' + } + }, + methods: { + beforeSave: function (args) { + args.needBlobData = true; // To trigger the saveComplete event. + args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event. + }, + saveComplete: function (args) { + // To obtain blob data. + console.log("Spreadsheet BlobData: ", args.blobData); + } + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js new file mode 100644 index 000000000..c30a648e0 --- /dev/null +++ b/ej2-vue/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-spreadsheet": "syncfusion:ej2-vue-spreadsheet/dist/ej2-vue-spreadsheet.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/pdfviewer/how-to/add-save-button.md b/ej2-vue/pdfviewer/how-to/add-save-button.md new file mode 100644 index 000000000..9ef1b436a --- /dev/null +++ b/ej2-vue/pdfviewer/how-to/add-save-button.md @@ -0,0 +1,265 @@ +--- +layout: post +title: Add save button in Vue Pdfviewer component | Syncfusion +description: Learn here all about how to add save button in Toolbar in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. +control: Toolbar +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Add Save button in Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Save button - `Save` button-item can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Newly added `save` button-item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/). + +* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarItem/). + +* Enable, Disable - `Save` button-item can be enabled or disable using [`enabletoolbaritem`].(https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar/#enabletoolbaritem) + +{% tabs %} +{% highlight html tabtitle="Composition API (Standalone)" %} + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (Standalone)" %} + + + + +{% endhighlight %} +{% highlight html tabtitle="Composition API (Server-Backed)" %} + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (Server-Backed)" %} + + + + +{% endhighlight %} +{% endtabs %} + +>Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a `save` button-item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the toolbar item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) diff --git a/ej2-vue/pivotview/getting-started.md b/ej2-vue/pivotview/getting-started.md index 5a54781f4..f51bf79b3 100644 --- a/ej2-vue/pivotview/getting-started.md +++ b/ej2-vue/pivotview/getting-started.md @@ -122,14 +122,15 @@ Follow the below steps to add the Vue Pivotview component: 1\. First, import and register the Pivotview component in the `script` section of the **src/App.vue** file. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} - +{% endraw %} {% endhighlight %} {% endtabs %} @@ -247,11 +248,17 @@ In-order to define each field in the respective axis, the following basic proper In this illustration, "Year" and "Quarter" are added in column, "Country" and "Products" in row, and "Sold" and "Amount" in value section respectively. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs88/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs88/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -264,11 +271,17 @@ Formatting defines a way in which values should be displayed. For example, forma > Only fields from value section, which is in the form of numeric data values are applicable for formatting. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs89/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs89/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -299,11 +312,17 @@ The field list allows to add or remove fields and also rearrange the fields betw > If the `FieldList` module is not injected, the Field List will not be rendered with the pivot table component. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs90/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs90/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -316,11 +335,17 @@ The grouping bar feature automatically populates fields from the bound data sour > If the `GroupingBar` module is not injected, the grouping bar will not be rendered with the pivot table component. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs91/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs91/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -331,11 +356,17 @@ The grouping bar feature automatically populates fields from the bound data sour The filter axis contains collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. The fields along with filter members could be set to filter axis either through report via code behind or by dragging and dropping fields from other axes to filter axis via grouping bar or field list at runtime. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs92/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs92/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -348,11 +379,17 @@ The calculated field feature allows user to insert or add a new calculated field > If the `CalculatedField` module is not injected, the calculated field popup will not be rendered with the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue) %} +{% highlight html tabtitle="Composition API (~/src/App.vue) %}{% raw %} + {% include code-snippet/pivot-grid/default-cs93/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs93/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} @@ -373,11 +410,17 @@ yarn run serve Output will be displayed as follows. {% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs94/app-composition.vue %} + +{% endraw %} {% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %}{% raw %} + {% include code-snippet/pivot-grid/default-cs94/app.vue %} + +{% endraw %} {% endhighlight %} {% endtabs %} diff --git a/ej2-vue/spreadsheet/open-save.md b/ej2-vue/spreadsheet/open-save.md index 98f027350..b8854570f 100644 --- a/ej2-vue/spreadsheet/open-save.md +++ b/ej2-vue/spreadsheet/open-save.md @@ -160,6 +160,78 @@ The following code example shows how to save the spreadsheet data as base64 stri {% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %} +### To open an Excel file located on a server + +By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openfromjson) method to load that `JSON data` into the Spreadsheet component. + +**Server Endpoint**: + +```csharp + public IActionResult Open([FromBody] FileOptions options) + { + OpenRequest open = new OpenRequest(); + string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; + // Getting the file stream from the file path. + FileStream fileStream = new FileStream(filePath, FileMode.Open); + // Converting "MemoryStream" to "IFormFile". + IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); + open.File = formFile; + // Processing the Excel file and return the workbook JSON. + var result = Workbook.Open(open); + fileStream.Close(); + return Content(result); + } + + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + } +``` + +**Client Side**: + +```js + + // Fetch call to server to load the Excel file. + fetch('https://localhost:{{Your port number}}/Home/Open', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ FileName: 'Sample' }), + }) + .then((response) => response.json()) + .then((data) => { + // Load the JSON data into spreadsheet. + spreadsheet.openFromJson({ file: data }); + }) + +``` + +You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. + +```js +// To open an Excel file from the server. +fetch('https://localhost:{port number}/Home/Open') +``` + +## To open an excel file from blob data + +By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) method in the Spreadsheet component to load that `File` object. + +Please find the code to fetch the blob data and load it into the Spreadsheet component below. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-from-blobdata-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-blobdata-cs1" %} + ### External workbook confirmation dialog When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. @@ -342,6 +414,92 @@ The following code example shows how to save the spreadsheet data as base64 stri {% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %} + +### To save an Excel file to a server + +By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. + +**Client Side**: + +```js + + // Convert the spreadsheet workbook to JSON data. + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + formData.append('FileName', "Sample"); + formData.append('saveType', 'Xlsx'); + // Passing the JSON data to perform the save operation. + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); + formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); + // Using fetch to invoke the save process. + fetch('https://localhost:{{Your port number}}/Home/Save', { + method: 'POST', + body: formData + }).then((response) => { + console.log(response); + }); + }); + +``` + +**Server Endpoint**: + +```csharp + + public string Save(SaveSettings saveSettings) + { + ExcelEngine excelEngine = new ExcelEngine(); + IApplication application = excelEngine.Excel; + try + { + + // Save the workbook as stream. + Stream fileStream = Workbook.Save(saveSettings); + // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. + // You can also save the stream file in your server location. + IWorkbook workbook = application.Workbooks.Open(fileStream); + string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; + var file = System.IO.File.Create(basePath); + fileStream.Seek(0, SeekOrigin.Begin); + // To convert the stream to file options. + fileStream.CopyTo(file); + file.Dispose(); + fileStream.Dispose(); + return string.Empty; + } + catch (Exception ex) + { + return ex.Message; + } + } + +``` + +You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. + +```js +//To save an Excel file to the server. +fetch('https://localhost:{port number}/Home/Save') +``` + +### To save an excel file as blob data + +By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#savecomplete) event. You can then post the blob data to the server endpoint for saving. + +Please find below the code to retrieve blob data from the Spreadsheet component below. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %} + + ### Supported file formats The following list of Excel file formats are supported in Spreadsheet: