我实现了一个加载栏，当我的脚本在 Google 表格的后台运行时，几乎所有 CSS 中使用的元素实际上都可以正常工作，唯一不起作用的是应该位于加载栏中心的图像。
我发现了如何在Google Appscript中实际实现CSS，这里有CSS with Google App Script。 但是每当我使用背景图像：url(myimage.png(时;加载栏中没有显示图像。
CSS
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="shortcut icon" href="../assets/images/ico/favicon.ico" />
<meta name="sitedomain" content="www.sdfsd.com.mx" />
<meta name="country" content="Am" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="loader.css"/>
</head>
<body>
<style>
.text-loader {
font-family: Arial, sans-serif;
font-size: 20px;
}
.loader-align {
width:100%;
height:100%;
margin: 0 auto;
}
.center {
text-align: center;
}
.dextra-d {
background-image: url(d_icon.png);
background-repeat: no-repeat;
background-position: center;
}
@keyframes lds-double-ring {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-double-ring {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes lds-double-ring_reverse {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes lds-double-ring_reverse {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.lds-double-ring {
position: relative;
}
.lds-double-ring div {
position: absolute;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 50%;
border: 8px solid #000;
border-color: #1d3f72 transparent #1d3f72 transparent;
-webkit-animation: lds-double-ring 2.6s linear infinite;
animation: lds-double-ring 2.6s linear infinite;
}
.lds-double-ring div:nth-child(2) {
width: 140px;
height: 140px;
top: 30px;
left: 30px;
border-color: transparent #5699d2 transparent #5699d2;
-webkit-animation: lds-double-ring_reverse 2.6s linear infinite;
animation: lds-double-ring_reverse 2.6s linear infinite;
}
.lds-double-ring {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style>
<div class="center">
<div class="dextra-d">
<div class="lds-double-ring loader-align">
<div></div>
<div></div>
</div>
</div>
<span class="text-loader">Cargando entrevista...</span>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?!= include('LoadBar'); ?>
<script>
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>试试这个：
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(url){
var s='<style type="text/css"> .myimage{ background-image:url("' + url + '");background-repeat:no-repeat;background-position:center;width:100%;height:100px;} </style>';
$(s).appendTo("head");
console.log('URI:n%sn',url);//I needed this to debug it because I left the last parenthesis off at first.
})
.convImageUrl();
};
</script>
我从柯特那里得到了大部分
这是 Code.gs 中的函数：
function convImageUrl(url){//need to add a default logo here
var url=url || "some default image url";
var blob=UrlFetchApp.fetch(url).getBlob();
var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
return b64Url;
}
我从Tanaike那里得到了大部分的convImageUrl((
这是一种将整个图像嵌入到 url 中的方法。 您可以将其作为字符串存储在应用程序中。你可以把它放到你的css background-image：url("b64Url-string"(
我最近在玩这个，这是一种将图像存储在文件中的方法。 我必须这样做，因为工作表中的单元格有 50,000 个字符的限制。 该函数检查它们是否已经存在，如果存在，则只返回存储文件的数据。
function saveImageUrlInFile(imagename,content) {
if(imagename) {
var filename=imagename.slice(0,imagename.indexOf('.'));
var folder=DriveApp.getFolderById('FolderId');
var files=folder.getFilesByName(filename)
var n=0;
var file;
while(files.hasNext()) {
file=files.next();
n++;
}
if(n==0){
var f=folder.createFile(filename,content,MimeType.PLAIN_TEXT);
return {name:f.getName(),id:f.getId()};
}else{
return {name:file.getName(),id:file.getId()};
}
}
}
尝试在图像网址上输入" "。
background-image: url("d_icon.png");