I made the following result by coding on a spreadsheet.
However, what you see on the screen is slightly different from the actual data.
Each time you scroll up and down, the value of border changes little by little.
this picture is vue spreadsheet with broken border
this picture Excel screen output as actual saveurl
Add to
The cellModel is thought to be as follows, so I coded it as a structure below and made the result like the picture above.
interface cellStyle {
textAlign?: 'left' | 'right' // this.sht.cellFormat({'textAlign': 'Left'}, 'A$3')
verticalAlign?: 'top' | 'bottom'
borderLeft?: string // this.sht.cellFormat({'borderLeft': '2px solid #14522B'}, 'A$3')
borderRight?: string // this.sht.cellFormat({'borderRight': '2px solid #14522B'}, 'A$3')
borderBottom?: string // this.sht.cellFormat({'borderBottom': '2px solid #14522B'}, 'A$3')
borderTop?: string // this.sht.cellFormat({'borderTop': '2px solid #14522B'}, 'A$3')
backgroundColor?: string // this.sht.cellFormat({'backgroundColor': '#14522B'}, 'A$3')
color?: string // this.sht.cellFormat({'color': '#2B2B2B'}, 'A$3')
fontFamily?: string // this.sht.cellFormat({'fontFamily': '돋움'}, 'A$3')
fontSize?: string // this.sht.cellFormat({'fontSize': '15pt'}, 'A$3')
fontStyle?: 'italic' | '' // this.sht.cellFormat({'fontStyle': 'italic'}, 'A$3')
fontWeight?: 'bold' | '' // // this.sht.cellFormat({'fontWeight': 'bold'}, 'A$3')
textDecoration?: 'underline' | ''// this.sht.cellFormat({'textDecoration': 'underline'}, 'A$3')
}
interface cell {
value?: string // this.sht.updateCell({value: '1'}, 'A$1')
formula?: string // this.sht.updateCell({formula: '=SUM(1, 1)'}, 'A$1')
hyperlink?: string // this.sht.updateCell({hyperlink: 'www.naver.com'}, 'A$1')
wrap?: boolean // this.sht.updateCell({wrap: true}, 'A$1')
colSpan?: number // this.sht.updateCell({colSpan: 2}, 'A$1')
rowSpan?: number // this.sht.updateCell({rowSpan: 2}, 'A$1')
style?: cellStyle
}
what'worng??
Hi Leeheejae,
We have been checking your reported issue and we were facing complexity while validating it in the sample. We will update you further details on September – 16th, 2022.
We appreciate your patience until then.
Regards,
Vasanth R
Hi Leeheejae,
We need some details from your side to proceed further. Please address the below requirements.
What’s the version of the platform you were noticed the issue – whether vue 2.x or vue 3.x.?
If possible , kindly share the issue replicable ( online (or) Local ) sample to validate it. It would be more useful to check your reported issue.
Kindly get back to us with the above requested details to proceed further.
Regards,
Vasanth
R
i use vue 2.6.14
and my inset code
Also, the generated Excel
openUrl: When loaded as 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', it is loaded normally.
But I can't use openUrl because I have to use it in an environment without internet.
=============================================================================
add txt file
Hi Leeheejae,
We need to validate more on the snippet provided, so we will update you the further details on September – 20th, 2022. We appreciate your patience until then.
Regards,
Vasanth R
Hi Leeheejae,
We have prepared the sample with the help of the snippets provided by you and we didn’t notice any issues as you mentioned on border. So, we kindly request you to replicate the issue in the below attached sample to provide better solution regarding.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_border-1943081423.zip
Get back to us with the above requested sample or if you need further assistance regarding.
Regards,
Vasanth R
i found out
Border breakage is found in merge cells
example)
style1 = {
}
style2 = {
borderBottom": "1px solid #000000",
"borderLeft": "1px solid #000000",
"borderRight": "1px solid #000000",
"borderTop": "1px solid #000000",
"fontFamily": "Tahoma",
"fontSize": "8pt",
"fontWeight": "Bold",
"textAlign": "Center",
"verticalAlign": "Middle"
}
Q1)
Maybe like style1 and style2
Is there a difference in the case of the first letter?
Also #000000 === black ?
Q2)
And is the order important?
merge -> write cell value -> cell format
merge -> cell format -> write cell value
Q3)
If A1:B1 is merged
updateCell({value: 'new value'}, 'A1')
updateCell({value: 'new value'}, 'A1:B1')
Doesn't both matter?
In addition, I wish there was a function to load xlsx from local ( no internet )
Attachment: sample_57e20d74.zip
Hi Leeheejae,
We are validating your sample and will update you further on October – 05th , 2022. We appreciate your patience until then.
Regards,
Vasanth
R
Hi Leeheejae,
We have checked your query and glad to answer your questions.
Q1. Maybe like style1 and style2
Is there a difference in the case of the first letter?
Also #000000 === black ?
Casing is necessary on declaring a variable. Here on the provided snippet on style2 you have declared the style parameter enclosing with “ ”. This makes the parameter to act as a string. We hereby attach the proper declaration.
CODE SNIPPET:
let style1 = { backgroundColor: "#FFFFCC", borderBottom: "1px solid black", borderLeft: "1px solid black", borderRight: "1px solid black", borderTop: "1px solid black", fontFamily: "Tahoma", fontSize: "8pt", textAlign: "center", verticalAlign: "middle" }
let style2 = {
borderBottom: "1px solid #000000", borderLeft: "1px solid #000000", borderRight: "1px solid #000000", borderTop: "1px solid #000000", fontFamily: "Tahoma", fontSize: "8pt", fontWeight: "Bold", textAlign: "Center", verticalAlign: "Middle" }
|
And the hex code #000000 refers to Black.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Q2. And is the order important?
merge -> write cell value -> cell format
merge -> cell format -> write cell value
Order of updating the cell model is not an issue. You can use any of the above-mentioned order to perform merge, update, and format on a cell at any point of time.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Q3. If A1:B1 is merged
updateCell({value: 'new value'}, 'A1')
updateCell({value: 'new value'}, 'A1:B1')
Doesn't both matter?
As instructed above even you merge the cells you can update the data into the cell through the particular cell address or by providing the range of the merged cells.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Function to load xlsx from local
You can use the local service to achieve your requirement. For more details do refer the attached kb.
https://www.syncfusion.com/kb/13200/how-to-remove-trial-version-tab-created-in-spreadsheet
Kindly get back to us if you need further assistance regarding.
Regards,
Vasanth R