Inserting a Google Drive image into a document usi

2019-04-11 07:34发布

站内问答 / 前端开发
961 2 4

I am trying to pro grammatically insert an image into a document. I can get this to work fine with an image with a URL such as http://www.geeks-on-wheels.net/wp-content/uploads/apple.jpg.

The problem comes when trying to use an image located on my Google Drive.

The URL looks like this:

https://docs.google.com/a/finance-in-motion.com/file/d/0B5sPSMZ9pf-QMG9GOVROakxQYmM/edit

or

https://docs.google.com/a/finance-in-motion.com/file/d/0B5sPSMZ9pf-QMG9GOVROakxQYmM/edit?usp=sharing.

The script doesn't seem to know what to do with it and throws an error. Any help would be appreciated.

2条回答
放我归山
2楼-- · 2019-04-11 08:08

To insert files from Drive do not use the HTTP route unless the file has been made public via drive hosting

Insert use the built in apis to read the file's blog and insert the img.

Here is an example of inserting a jpg from my drive (or a file I have access to) to a document.

function insertImageFromDrive(){
 var fileId = '0B_dyIOzoasdfasdfPVTMxdTVXWDg';
 var img = DriveApp.getFileById(fileId).getBlob();
 DocumentApp.getActiveDocument().getBody().insertImage(0, img); 
}

This will insert an image at the top of the document. To get more control over the cursor/selection replacement see this blog post.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-04-11 08:12

I got a task where i have to make a form to upload its data and image to google spreadsheet. So i have created three files to achieve this task on my Google App Script project.

Files: Code.gs (carrying the form handling code)

form.html (carrying the form html code)

thanks.html (show after successfull submission of form)

and on my google drive i have a folder named "uploads" where all the images upload from the form and its link save in to the spreadsheet along with other data of the form. you can check the running app here : https://script.google.com/macros/s/AKfycbwmUDXR54cWO8PbCaexqDDo2397kyAi-AluUwWuhfG0VqTyK5ed/exec and data will save to this spreasheet : https://docs.google.com/spreadsheets/d/12StuWSCebwRBBTxOcYEr8ksHN8PJhtDIE7NWi9UwGf0/edit#gid=0

following are the files code

Code.gs

var submissionSSKey = [YOUR-SPREADSHEET-ID];
var folderId = [YOUR-FOLDER-ID];

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
 var fileBlob = theForm.myFile;
 var folder = DriveApp.getFolderById(folderId);
 var doc = folder.createFile(fileBlob);


 // Fill in response template
 var template = HtmlService.createTemplateFromFile('thanks.html');
 var fname = template.name = theForm.name+','+fileBlob.total;
 var guests = template.guests = theForm.guests;
 var filters = template.filters = theForm.filters_value;
 var email = template.email = theForm.email;

 var fileUrl = template.fileUrl = doc.getUrl();
 var phone = template.phone = theForm.phone;
 var bedroom = template.bedroom = theForm.bedroom;
 var beds = template.beds = theForm.beds;
 var bathroom = template.bathroom = theForm.bathroom;
 var property_name = template.property_name = theForm.property_name;
 var property_description = template.property_description = theForm.property_description;
 var address = template.address = theForm.address;

 // Record submission in spreadsheet
 var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
 var lastRow = sheet.getLastRow();
 var targetRange = sheet.getRange(lastRow+1, 1, 1, 12).setValues([[fname,guests,filters,email,fileUrl,phone,bedroom,beds,bathroom,property_name,property_description,address]]);


 // Return HTML text for display in page.
  return template.evaluate().getContent();
 }

form.html

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  document.getElementById("myForm").reset(); 
  $('input[id=filtercheck]').change(function(){
                var allVals = [];
             $('input[type="checkbox"]:checked').each(function () {
              //     removed the space ^
                 allVals.push($(this).val());
             });
             $('#filters_value').val(allVals);
    });
  });


 function mySubmitFunction()
 {
  if(!$('input[id=terms_check]').is(':checked'))
  {
   return false;
  }
 }

// Javascript function called by "submit" button handler,
// to show results.

function updateOutput(resultHtml) {
  toggle_visibility('inProgress');
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = resultHtml;
}

// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
  e.style.display = 'none';
else
  e.style.display = 'block';
}

</script>
<style>
#formDiv{width:90%; padding:10px; font-size:12px;}
/*.singlerow{width:100%; height:auto; float:left; margin-top:10px;}*/
input[type=text], input[type=email],  select {min-width:200px; height:30px; margin:10px; }
.top_bar{width:100%; height:40px; float:left; background-color:#000000; padding:5px;}
.top_bar img{margin-top:5px; float:left;}
</style>
</head>
<body>

<div class="top_bar"><a href="http://www.nzholidayhomes.nz"><img src="http://dx577khz83dc.cloudfront.net/4085/c5b11516-3be0-4e08-b962-b2e761e895cf.png" height="30"  /></a></div>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm" onsubmit="return mySubmitFunction()" style="display:block;">

<input name="name" type="text" placeholder="Name" />
<input name="phone" type="text" placeholder="phone" />
<input name="email" type="text" placeholder="Email" /><br>



<select name="guests">
<option>Select Guests</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select name="bedroom">
<option>Select Bedroom</option>
<option>1</option>
<option>2</option>
<option>3</option>

</select>


<select name="beds">
<option>Select Beds</option>
<option>1</option>
<option>2</option>
<option>3</option>

</select>

<select name="bathroom">
<option>Select Bathroom</option>
<option>1</option>
<option>2</option>
<option>3</option>

</select><br>


<input type="text" name="property_name" Placeholder="Property Name" />
<input type="text" name="property_description" placeholder="Property Description"/>
<input type="text" name="address" placeholder="Address"/><br>





<input type="checkbox" value="Suitable for Children" name="filtercheck" id="filtercheck"> <label>Suitable for Children</label>
<input type="checkbox" value="Suitable for Events" name="filtercheck"  id="filtercheck"><label> Suitable for Events</label>
<input type="checkbox" value="Suitable for Pets" name="filtercheck"  id="filtercheck"><label> Suitable for Pets</label>
<input type="checkbox" value="Suitable for Smoking" name="filtercheck"  id="filtercheck"><label> Suitable for Smoking</label><br>



<input type="checkbox" value="Stove" name="filtercheck"  id="filtercheck"><label> Stove</label>
<input type="checkbox" value="Microwave"  name="filtercheck" id="filtercheck"> Microwave
<input type="checkbox" value="Dishwasher" name="filtercheck"  id="filtercheck"> Dishwasher
<input type="checkbox" value="Fridge" name="filtercheck"  id="filtercheck"> Fridge
<input type="checkbox" value="Freezer" name="filtercheck"  id="filtercheck"> Freezer<br>



<input type="checkbox" value="Washer" name="filtercheck"  id="filtercheck"> Washer
<input type="checkbox" value="Dryer" name="filtercheck"   id="filtercheck"> Dryer
<input type="checkbox" value="Fire Alarm" name="filtercheck"  id="filtercheck"> Fire Alarm
<input type="checkbox" value="First Aid Kit"  name="filtercheck" id="filtercheck"> First Aid Kit
<input type="checkbox" value="Fire Extinguisher"  name="filtercheck" id="filtercheck"> Fire Extinguisher<br>


<input type="checkbox" value="TV" name="filtercheck"  id="filtercheck"> TV
<input type="checkbox" value="Sky" name="filtercheck"  id="filtercheck"> Sky
<input type="checkbox" value="Wifi" name="filtercheck"  id="filtercheck"> Wifi
<input type="checkbox" value="Fireplace" name="filtercheck"  id="filtercheck"> Fireplace
<input type="checkbox" value="Heaters" name="filtercheck"  id="filtercheck"> Heaters<br>


<input type="checkbox" value="Spa" name="filtercheck"  id="filtercheck"> Spa
<input type="checkbox" value="Pool" name="filtercheck"  id="filtercheck"> Pool
<input type="checkbox" value="BBQ" name="filtercheck"  id="filtercheck"> BBQ
<input type="checkbox" value="Off-street Parking" name="filtercheck"  id="filtercheck"> Off-street Parking
<input type="checkbox" value="On-street Parking" name="filtercheck"  id="filtercheck"> On-street Parking<br> 
<input type="hidden" value="" id="filters_value" name="filters_value" />

Image Files Only: <input name="myFile" type="file" multiple /><br>


<input type="checkbox" id="terms_check" /> Agree to the <a href="#">Terms &amp; Conditions</a><br><br><br>


<input type="button" id="form_btn_submit" value="Submit" onclick="toggle_visibility('myForm'); 
  toggle_visibility('inProgress'); 
   google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode);" />

</form>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Your Data is uploaded. Please check the <a href="https://docs.google.com/spreadsheets/d/12StuWSCebwRBBTxOcYEr8ksHN8PJhtDIE7NWi9UwGf0/edit?pli=1#gid=0&vpid=A2" target="_blank">spreadsheet</a>
</div>

<div id="output">
  <!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>


</div>

<a href="http://www.nzholidayhomes.nz">Click here to back to main website</a>

</body>
</html>

thanks.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<h1>Thanks</h1>
<p>Thank you for your submission.</p>
Name: <?= fname ?><br/>
Filters: <?= filters ?><br/>

Email: <?= email ?><br/>
File URL: <?= fileUrl ?><br/>
</div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)