我已经在Google Apps脚本中使用以下HTML创建了侧边栏：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel=stylesheet type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0-RC3/js/bootstrap-datepicker.min.js"></script>
<style>
h1 {
font-size: 2em;
}
.jumbotron {
background-color: #3cba54;
color: white;
border-radius: 0px;
}
.dates {
margin: 20px auto;
width: 500px;
}
@media(max-width: 900px) {
.dates {
width: 80%;
}
input::-webkit-input-placeholder {
line-height: 3;
}
}
.label {
padding-right: 10px;
width: 50px;
font-weight: bold;
color: #383b3d;
font-size: 14px;
}
.icon {
font-size: 2em !important;
}
input {
border-radius: 10px !important;
border-style: solid;
}
#additionalInfo {
margin: auto;
}
.label1 {
color: #848a8e;
text-align: center;
width: 100%;
font-size: 14px;
}
#title {
margin: auto;
}
body {
color: #383b3d;
}
.days {
padding: 0 30%;
width: 100%;
}
.daysDes {
font-size: 0.8em;
width: 100%;
}
.submit {
width: 100%;
margin: 10px auto;
}
#instructions {
font-size: 12px;
background-color: #2aa3ef;
color: white;
border-radius: 10px;
padding: 5px;
margin-bottom: 10px;
}
.hidden {
display: none;
}
#info {
color: #2aa3ef;
font-size: 2em;
}
#info:hover {
cursor: pointer;
}
#close:hover {
cursor: pointer;
}
#close {
font-size: 2em;
color: #e58b91;
}
.disabled {
color: #d8d8d8 !important;
}
.toggle {
background: #bad2d6;
border: #bad2d6;
}
#noWin {
font-size: 14px;
}
#noBook {
width: 100%;
margin-top: 5px;
padding: 3px;
}
</style>
</head>
<body>
<div class="jumbotron">
<h1 class="text-center"><span class="soVar">Special offer</span><span class="amendVar hidden">Amendment</span></h1>
</div>
<div class="container">
<form id="specials">
<!--=================================================== Special / amendment ================================================================== -->
<div class="row">
<div class="col-sm-12 text-center">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-info active toggle">
<input type="radio" name="offerType" value="specialOffer" id="specialOffer" checked="" class="toggle"> Special offer
</label>
<label class="btn btn-info toggle">
<input type="radio" name="offerType" value="amendment" id="amendment" autocomplete="off" class="toggle"> Amendment
</label>
</div>
</div>
</div>
<hr>
<!-- =============================================================================================== Name of offer or amendment ================================================================== -->
<div class="form-group">
<label class="label1" for="title"><em><span class="soVar">Offer name / b</span><span class="amendVar hidden">B</span>rief description of <span class="soVar">offer</span> <span class="amendVar hidden">amendment</span></em></label>
<input id="title" type="text" class="form-control" placeholder="e.g. Stay 3, pay 2" name="offerName">
</div>
<hr>
<!--=================================================== Date picker ========================================================================= -->
<div class="label1 text-center"><em>Please enter the first and last date of the <span class="soVar">special offer</span><span class="amendVar hidden">amendment</span></em></div>
<div class="container dates">
<div class="input-group date">
<i class="far fa-calendar-alt label icon"></i>
<input type="text" class="form-control datepicker" id="datepickerFrom" placeholder="Start date" name="firstDate">
</div>
</div>
<div class="container dates">
<div class="input-group date">
<i class="far fa-calendar-alt label icon"></i>
<input type="text" class="form-control datepicker" id="datepickerTo" placeholder="End date" name="lastDate">
</div>
</div>
<hr>
<!--=================================================== Booking window ========================================================================= -->
<div id="bookWin">
<div class="label1 text-center"><em>Please enter the booking window below (from / to)</em></div>
<div id="internalClose">
<div class="container dates">
<div class="input-group date">
<i class="far fa-calendar-alt label icon"></i>
<input type="text" class="form-control datepicker" id="bookingWindowFrom" placeholder="From" name="bookingWindowFrom">
</div>
</div>
<div class="container dates">
<div class="input-group date">
<i class="far fa-calendar-alt label icon"></i>
<input type="text" class="form-control datepicker" id="bookingWindowTo" placeholder="To" name="bookingWindowTo">
</div>
</div>
</div>
<div id="noBook" class="text-center">
<input type="checkbox" id="noBookWin">
<label id="noWin" for="noBookWin"><em>No booking window</em></label>
</div>
</div>
<hr>
</div>
<!--=================================================== Days of week ========================================================================= -->
<div id="daysContainer">
<div class="label1 text-center"><em>Select valid stay days or select 'See below' and enter details below</em></div>
<br>
<div class="days">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="all" id="all" name="days">
<label class="form-check-label" for="all" id="allLabel">
All
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Monday" id="monday" name="days">
<label class="form-check-label daysLabel" for="monday">
Monday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Tuesday" id="tuesday" name="days">
<label class="form-check-label daysLabel" for="tuesday">
Tuesday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Wednesday" id="wednesday" name="days">
<label class="form-check-label daysLabel" for="wednesday">
Wednesday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Thursday" id="thursday" name="days">
<label class="form-check-label daysLabel" for="thursday">
Thursday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Friday" id="friday" name="days">
<label class="form-check-label daysLabel" for="friday">
Friday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Saturday" id="saturday" name="days">
<label class="form-check-label daysLabel" for="saturday">
Saturday
</label>
</div>
<div class="form-check">
<input class="form-check-input daysSelect" type="checkbox" value="Sunday" id="sunday" name="days">
<label class="form-check-label daysLabel" for="sunday">
Sunday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="BelowLabel" id="below" name="days">
<label class="form-check-label" for="below" id="belowLabel">
See below
</label>
</div>
</div>
<hr>
</div>
<!--==================================================== Additional info ================================================================== -->
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="label1 text-center" for="additionalInfo"><em>Additional info (specific periods, closed dates etc.)</em></label>
<textarea class="form-control" id="additionalInfo" name="additionalInfo" rows="8" placeholder="e.g. Closed: 01 Jul - 06 Jul 18, arrival on Sundays only..."></textarea>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label class="label1" for="url"><em>Email URL</em></label>
<p class="label1"><i class="fas fa-info-circle" id="info"></i>
<i class="fas fa-times hidden" id="close"></i>
</p>
<ul id="instructions" class="hidden">
<li><i class="fas fa-arrow-circle-right"></i> Open email</li>
<li><i class="fas fa-arrow-circle-right"></i> Print</li>
<li><i class="fas fa-arrow-circle-right"></i> Select 'Save to Google Drive'</li>
<li><i class="fas fa-arrow-circle-right"></i> Open Google Drive</li>
<li><i class="fas fa-arrow-circle-right"></i> Go to 'Recent'</li>
<li><i class="fas fa-arrow-circle-right"></i> Right click on relevant PDF and select 'Get shareable link'</li>
<li><i class="fas fa-arrow-circle-right"></i> Toggle link sharing to 'on'</li>
<li><i class="fas fa-arrow-circle-right"></i> Copy URL and paste below</li>
</ul>
<input id="url" type="text" class="form-control" id="url" placeholder="Paste URL here" name="url">
</div>
<button type="submit" class="btn btn-success btn-lg submit">Submit</button>
<!-- <button type="submit" class="btn btn-primary googleGreen" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Sending">Send Email</button>
<button type="button" class="btn btn-primary googleGray" onClick="google.script.host.close()">Cancel</button> -->
<input type="hidden" name="region" value=<?=region ?>>
<input type="hidden" name="contractorName" value=<?=contractorName ?>>
<input type="hidden" name="contractorEmail" value=<?=contractorEmail ?>>
<input type="hidden" name="country" value=<?=country ?>>
<input type="hidden" name="city" value=<?=city ?>>
<input type="hidden" name="supplier" value=<?=supplier ?>>
<input type="hidden" name="system" value=<?=system ?>>
<input type="hidden" name="hotelName" value=<?=hotelName ?>>
<input type="hidden" name="oscarSupplierNo" value=<?=oscarSupplierNo ?>>
<input type="hidden" name="productCode" value=<?=productCode ?>>
<input type="hidden" name="contractId" value=<?=contractId ?>>
<input type="hidden" name="documentLink" value=<?=documentLink ?>>
</form>
</div>
</body>
<!--==============================================================================================================================-->
<script>
// Day of week selection
$(document).ready(function() {
$('#all').change(function() {
if ($('#all').is(':checked')) {
$('.daysSelect').prop('disabled', true);
$('.daysSelect').prop('checked', true);
$('.daysLabel').addClass('disabled');
$('#below').prop('disabled', true);
$('#belowLabel').addClass('disabled');
} else {
$('.daysSelect').prop('disabled', false);
$('.daysSelect').prop('checked', false);
$('.daysLabel').removeClass('disabled');
$('#below').prop('disabled', false);
$('#belowLabel').removeClass('disabled');
}
})
})
$(document).ready(function() {
$('#below').change(function() {
if ($('#below').is(':checked')) {
$('#all').prop('disabled', true);
$('.daysSelect').prop('disabled', true);
$('.daysSelect').prop('checked', false);
$('.daysLabel').addClass('disabled');
$('#allLabel').addClass('disabled');
} else {
$('#all').prop('disabled', false);
$('.daysSelect').prop('disabled', false);
$('.daysLabel').removeClass('disabled');
$('#allLabel').removeClass('disabled');
}
})
})
// Date picker
// Booking window
$(document).ready(function() {
$('#noBookWin').change(function() {
if ($('#noBookWin').is(':checked')) {
$('#internalClose').slideUp();
} else {
$('#internalClose').slideDown();
}
})
})
$(".datepicker").datepicker({
format: 'dd-mm-yyyy'
});
// Info for saving email
$("#info").click(function() {
$("#instructions").slideDown();
$("#info").addClass("hidden");
$("#close").removeClass("hidden");
});
$("#close").click(function() {
$("#info").removeClass("hidden");
$("#close").addClass("hidden");
$("#instructions").slideUp();
});
// toggle so / amendment
$(document).ready(function() {
$('#amendment').change(function() {
if ($('#amendment').is(':checked')) {
$('#daysContainer').slideUp();
$('.amendVar').removeClass('hidden');
$('.soVar').addClass('hidden');
$('#title').attr("placeholder", "e.g. Fake min stay");
$('#additionalInfo').attr("placeholder", "e.g. Input min 2 night stay for duration of contract due to distribution issues");
$('#bookWin').slideUp();
}
})
})
$(document).ready(function() {
$('#specialOffer').change(function() {
if ($('#specialOffer').is(':checked')) {
$('#daysContainer').slideDown();
$('.amendVar').addClass('hidden');
$('.soVar').removeClass('hidden');
$('#title').attr("placeholder", "e.g. Stay 3, pay 2");
$('#additionalInfo').attr("placeholder", "e.g. Closed: 01 Jul - 06 Jul 18, arrival on Sundays only...");
$('#bookWin').slideDown();
}
})
})
$('form').submit(function(e) {
e.preventDefault();
google.script.run
.withSuccessHandler(function(result) {
google.script.host.close()
})
.entryOscarRegDetails(e.currentTarget);
});
</script>
</html>
在底部，我有一个输入，用户需要在其中输入指向PDF文档的链接。该文档实质上是一封电子邮件，它们将以PDF格式下载。但是这个过程很痛苦！用户必须打开电子邮件，去打印，在Google驱动器中下载，去驱动器并找到文件，获取可共享的链接并复制该链接。我真正想要的是用户能够下载电子邮件，然后将生成的下载拖放到侧栏中。然后，应在输入框中生成链接地址。
我到处都看过，并且找到了创建文件上传选项的方法，但是没有一个接受删除元素的方法。有人知道这是否可行以及如何实现吗？