【14.0.6】单元格显示缩略图

Joestar.Xu

本帖最后由 Joestar.Xu 于 2023-12-22 11:35 编辑

产品：SpreadJS

如题，需要在单元格显示图片，在官网示例中没找到对应的demo，请问如何实现？

Joestar.Xu · Joestar.Xu

了解了，刚才的示例是通过复制粘贴的方式插入图片的，如果是想通过代码插入的话可以参考以下代码：

window.onload = function () {
let designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
// JSON.stringify(GC.Spread.Sheets.Designer.ToolBarModeConfig)
);
let designer = new GC.Spread.Sheets.Designer.Designer(
"gc-designer-container",
designerConfig
);
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
let startRow = 16;
let startCol = 5;
let rowOffset = 3;
let colOffset = 3;
sheet.addSpan(startRow, startCol, rowOffset, colOffset);
var arr = [
"data:image/png;base64,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",
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAAA9CAYAAAAeTqOsAAAAAXNSR0IArs4c6QAADppJREFUeF7tnQm0TWUbxx+ZImPmeSzjQplCZIhoUWYSCk1EqGQmM5kqZJawzLPIMjWYF1moUCkZi0JmGb/1e761v+9+97vu2eecfc7e233ftVr3uuecfd79PP/3ef/P/3neXaK7d+/eFTOMBXxugR9//FF69OghX331lYwbN05atmypd5TIANznnk2g0ycunz9/XtatWyeLFi2Sr7/+Wv7++2957LHHpFWrVvLmm29K4sSJDcATKD58fdvXr19XUPfr109+++03vZdHHnlEI3e1atUkWbJk/7k/E8F97eqENflDhw7JlClTZOPGjfLdd99JpkyZpH79+tK4cWMpW7aspE2bVhIlSvQ/RjEAT1gY8d3d3rp1S86cOSODBw+WiRMnKoDTp0+vHLtXr16SJUuWeO/JANx3Lk8YEwbYO3fulE8//VSWLl2qfLtAgQLSsWNHqVWrlhQpUuT/onVcljEATxh48cVdkjjeuHFDfv75Z+nbt6+sWbNG+FuuXLnk3Xfflddff10eeOCBoO7FADwoc5k3R8oCN2/elG3btsmkSZNUEYGWVKhQQV555RWpV6+e0pLY/NrOXAzA7VjJvCdiFiBiHzx4UKZNm6YcO2nSpFK4cGGN4M8++6w8+OCDYX237wF+9epV+fPPPwXOljVrVkmZMmVIKz0sK5oPh2SBkydPSqdOnTRy//XXX1KuXDnVr6tXr66+DCVix56ILwEOL7ty5YqsWrVKRo8eLd9++63eV+nSpWXChAkqGQXL1ULykPlQ0Ba4c+eOatezZs2SgQMHqp8KFSokbdu21QQyefLkQV8zvg/4DuCAm9U+atQo5Wtwt5o1a8off/whu3btkuHDh2tUSJEihaOGMhcL3wKXLl2SoUOHysKFC+XIkSPy0EMPKS156qmnJGfOnI5EbN9H8AsXLkjv3r3lk08+0eya/oNGjRpJ586d1XBEha5duypVMcN9CxCQ8NnWrVvVb/v27dMCDVLf9OnTHY/YvgY40bpOnTqyadMm3daoalWsWFGpCjISUQGQP//885IkSRL3vZvAZ0BehK8oqVN5xH/srm3atFEdm16RSA/fUBSiQIsWLVQbJcv+6KOPlJocOHBAM+4VK1bICy+8IEOGDJHcuXNHZLuLtDPuh+sTsW/fvi1097HLTp48WaM0eRG+KV++fFSDjy8AjsEA85dffilp0qSRb775RkqUKKHbHdve2rVrlceNHDlSu8lMguneUrl27ZrybJJ9qo9E6gEDBujOC+d2QhkJ5u48D3A6x7p06aJ8DU2Usi0y0vfffy/du3eX9evXq3oyZswYpSsG3MG437n3/vPPPzJ37lx5//335dixY7qLdujQQdUROLdbw9MAZ7t75513tAhABk4XGZEataRZs2Zy/PhxrXINGzZMaYsBd/RhhI9++eUXpYfItUToGjVqyOzZsyVz5sxRj9i+STIxHBEBleTUqVMyfvx4LdvS8wvnJokkOrz99tuqprg9rD4KcgIW4OnTp+Xs2bNy7tw55aD58uXTylzJkiVdd7oTtkLP3rNnj+rZn332mQagBg0aqI+gI14Zno3gdJIRvZGXyMIB8tNPP61Rgr4EVBP+RnN7tHldTOcBbHjnkiVLdCehiAGt4u/sKJSeySFQFPLkySPLli3TPMGvg/vi/kgY4dkk/0iy5EEkkNyvl4YnAU7RpmfPnrrNAeonn3xSJUEoCVTkww8/1KTTTUqCo1EKKDatXLlSJcoMGTKovouj+a9UqVIavS9evCgvvviifPHFF1K5cmWZOnWqnkDx0+B+uQ+OiKFgEXhy5Mihyla3bt0kY8aMrgaae9nScwDHkCSM/fv319ZJGtrpLON3pCYM63aUICJDk4jYDNQBEip2mlSpUsVp699//13pCclY+/bt9bNu7jzBLC58QgsrhwygX8yb3/ERPdpeHp4DONIf1IMCgTUefvhh5eJUKN0s4ABO+CZtAjic8jL9EyS8efPmjdfPfJa+mT59+ui5QRJneLmXB8A+fPiwjB07VlUs/v3EE0/Ie++9pztVzLOPXr0PTwGcShcnOIiGREkiRdGiRfWAKdTErYhHQnXixAmtwPFYAhYZ7QEkWHYXnJWU0eOcP39+5bCcJfTaAMTWiXXk2Tlz5igVRPYjYr/88stem3K88/EMwDHq9u3btV1y7969ki5dOnnppZdU6w6nddJymJXoEUn5nWYs+DHOi2/hwDsp/0Mp4NlIYEQwcoNgFhzzgKbUrl1bFwvggeYEc41II4s5/vTTTwpqq1CD1MdiRCEhx/DbcB3gVmn3888/V9mP6hcRbsSIEdKwYcOwE0m4++rVqzXixn7GUbFixbSbjagaOxITcSlY0LwFLYFnA0rAfS+eHcj5KA4kzyTMzZs31+9OnTp1oI9F/HUUHiRNqAjldSQ/ggpHxCjc+Hm4DvDLly+rIRcvXqyJJEDjtDQleCc4nsUjueajjz6qXJmoDeiRtgAu1VHUDWvgcJJZpEhkyTJlymi0JXqH06XI/aEMoRWjDKHtk3i6NdjJyHmI1rQ/wLezZ8+uSfCrr77qiUJNuLZxDeBEyF9//VWIojiezjIM/vjjj6sMGBNw4d5kXJ+HqhDVAXmTJk20qMRA412+fLkuOubVtGlTTQxZHOEOFtuWLVuUe0OPPvjgA01Qo0lTmANPgPrhhx+UU5PME1SgH+Q+dPtRZ7hfhisA5zTOW2+9pVwPg9etW1ejBy2VbN0oDETWSA+2XxYTADt69KguMqIXSS05AIUmEksnuSc8nryCgg/6MTtVNO6VgIJeP3PmTNXveYgOciuBBNUKzR5d+34bUQU4EXH//v3atwCgMSgdgEhPbNUkfjgdYEUjquFs5EfK6nQqIkMyv4IFCypNat26tePzYHHzvfB5msQAO7sDWj/fTVJHpZN+91BtQNCAR5PUct2PP/5YKRkVVxYxRSZ2SnaQ+xHUMRdp1ABOdRIwIwOSSBLBARRaMsYnSyea8DpJZjQGnYjwYZJJFhe0pWrVqtrvYvfBMsHO01IqWEBQIZJMaBHfbQ1agomyJHp2B/QOyjdjxgzNG7A3uwU5DoM2ARYzsisLKxq7ht25R/J9EQc4p96R/6AD8E/AS6GEhhx4KBGNjkCehfHcc8/J/Pnz431UAJ1rRJ1wHyeAUTmND/9mXhSTUG2gLE5c+15OI4ElseNRZADcGkRWEjxOmkMnsBP0iJPmsQ/iAmbOpXKdzZs3K6At+ZOozzP6SKahVjR4UU6nZTWQJBpJoLl17YgCnC2S5ne4NokNVT/4HkUDy9j8nSgOH0QDt05ax2UQtl2SUoDAI3JJikLdxrk+0ZRIxzxJrIhykexvAZgbNmyQ1157TftqOFrH7/B/qpws3thSph1gEPF5CCVJc7Zs2TR/4Kf1CI1wbGTn+738nogAnGhC7zYFAp55QTQZNGiQOoDoGNPgtMLS7govRK5CiotrwN9psCJicbCB7r1AD170kuEBNzsZ+QcttNgCm1jH63id3Y6ozr2Ro6B0AFJsAoCxE+DlvvmJjErkRwVJyCCOz88RAXi7du1U1ybiQj8oIFjRMbYj4MH0NbAVoywQneMa8HW62HA4CSHatJ+cShst/J4dg3yDe4E2xL4Hq/JK4os90OL5G7kCNM9JRcdLASBSc3EU4Gy/KCCoAUQZlAKrZ/teN0Blj2eZVKpUSTXpuKqEHCiGkrBg6DTkERGRpBJOG5sdDa7PgWmiMQdxAzVnMQc+RzRHzSlevLjSPTi1GfYt4AjASYqso2Vk7TiD0rud0+1Eb6J4lSpV9Gfs6iWRD67KoqGnGpXF7XZZ++b99zsXLFig1IToO2/ePAW5nd0HWY/P0sKAlEogwE5m2LdAWABn66S7jjI2J3CQnpD/6Iu222WHHosaQBMS/DMmeElAATVN9pyit07V2789998JSAEnfBpqgkpk53kgcHJsS+EJWkOFkaJQOK0C7lsj+jMIGeBEbfRi5C4kKzg2Up+dqB3zNilooB6QRBGtYjqfhQN/ByRUOSOlTUfS7PS00HcCMFGTALmdsXv3bu1YREaluosd2AHsRH47108o7wka4ERtCgoUbejf4N+0tRJdQmlr5UQIhRY0aK5nARw+T2ECjZemJJp/nGi+irZjqRZSrSR5hmYFShLZtegytORSuDtqixcOVkfbdk58X1AAB8ycpH7jjTeECENxhKZ/ijahJn2UqVkwMbdvnEzJnlMkRC8WEwDxY/SCP5M3cEZzx44d8foMSRU7UF6nuMN9UxsI1bZOAMTv17AFcOskNRSCRAeNlkQJ2QrHheMAi4OzSJDFiOBEbJ6GBB/nO9ni7fBWLzoD9QdqQnIIhYs9kAPJMeDmvE7ZnkUN50Y69eOi9pIfbAOcqIKziDIkPgDQiYSH4g10BADgaLZxElWSVhYT1U8nvscto2MnAgHtBfBxCjQczWMnpC2APmx4NhGbHIMF7URrrlv367XvtQVwJk0U59QHdILOP6ceVE6vNRVPdHCKQ0Q7tHGqlZzqYYfwcxSznvrEaXR2Ies5KYCc32l8Yjd85plntMPP/B8qnF0itgHu7Nf+92qUrwEzjmZnILmifE/0JpL7TfOOy05IfnT2EcGhd7TEUonlIDV9JH6lX5HChJPXdR3gSIwkkLSr8pM2UU68ENXpy/Zz9HbSUeZaoVnAdYDDP5HCeOoTMiP9ykiGRHPADTXipwF6aA5O6J9yHeAAmONTJJtwfMr8lO/h+JTpaWOlDYD2TwPyhA7X4O/fdYAzZTgqhw7QfAE1UR0wc9qFwghau3n2d/DONZ8Q8QTAcQSlfyI4PRscQCC5RFrj8WaA3PQ8G7iGYgHPADyUyZvPGAsEsoABeCALmdd9bQEDcF+7z0w+kAUMwANZyLzuawsYgPvafWbygSxgAB7IQuZ1X1vAANzX7jOTD2QBA/BAFjKv+9oCBuC+dp+ZfCALGIAHspB53dcWMAD3tfvM5ANZ4F+W2jTCzSfRKwAAAABJRU5ErkJggg==",
];
for (let i = 0; i < arr.length - 1; i++) {
console.log(i);
var picture = sheet.pictures.add("f" + i, arr[i], 0, 0, 1, 1);
picture.pictureStretch(GC.Spread.Sheets.ImageLayout.center);
picture.startRow(startRow);
picture.startColumn(startCol);
picture.startRowOffset(0);
picture.startColumnOffset(0);
picture.endRow(startRow + rowOffset);
picture.endColumn(startCol + colOffset);
picture.endColumnOffset(0);
picture.endRowOffset(0);
}
};