在网站中嵌入交互式Google表格而不让用户保存更改[PHP，HTML] [英] Embed interactive Google Sheet in website without letting users save changes [PHP ,HTML]

问题描述

我想将Google表格电子表格嵌入我的网站。我希望这样，用户可以访问我的网站，他们可以查看电子表格并与其交互。电子表格还包含一些公式。例如，有一个

宽度，高度，结构，价格 p>

。面料是一个下拉菜单，它包含一些不同价格的面料。 计算价格的公式为：

高度*宽度*面料价值

因此，每当用户添加宽度，高度并选择结构时，它就会输出价格中的对应值。

因此，我想将此Google表格嵌入到我的网站中，以便用户可以使用它来计算价格而不保存到原始电子表格。
我有一个 php 网站。如果我们无法使用Google表格执行此操作，那么是否有任何方法将此Excel表单上传到我的网站并执行相同的操作？

请帮忙。

解决方案

你是什​​么意思，但我不完全确定。
从你在问题中所说的话我假设：

• 您有一张可用的Google表格电子表格。


• 您有一个网站，并且您希望将此电子表格嵌入您的网站。


• 人们能够与电子表格交互，但不用更改公式等等。

好吧，我想你有这里有两个主要选项：

选项1：使用权限嵌入电子表格

我意识到你已经尝试了这个选项，并且它没有工作。请参阅选项2. 第一个选项涉及获取已经制作的电子表格并对其添加一些编辑权限。我猜测在你的电子表格中，你有一个数据验证单元格（创建下拉菜单，如果没有，请说明这是如何完成的），并且这是用户选择一个数量输入到你的算法。如果是这种情况，那么您想要做的是这样的：

1. 在Google表格中打开电子表格并转到表单您希望人们进行互动。


2. 沿屏幕底部找到当前工作表，然后单击名称旁边的小黑箭头。然后点击保护表单。


3. 右侧会打开一个新窗口。 （保护工作表窗口的屏幕快照）在此新窗口中，单击工作表'然后在下面的下拉列表中，选择用户与之交互的工作表。 然后，勾选'除特定单元格'框外。在新框中，输入对用户输入单元格的引用。如果您有多个单元格，请单击添加另一个范围，然后将此新框用于其他单元格引用。完成此操作后，请点击设置权限。当出现新窗口时，请检查是否勾选了限制谁可以编辑此页面选项，并在下面显示只有您。然后点击完成。


4. 现在，要嵌入此文件，您需要做的是转到左上角的文件标签并点击发布到网页。出现窗口时，选择嵌入，然后在下拉列表中选择用户将与之交互的页面。然后点击发布，希望你会得到一个可以在你的网站上使用的嵌入代码。
   请尝试此操作并将结果返回给我。

选项2： strong>

我在网上找到了一些HTML，并且已经添加了一些功能以适应您的需求。请运行下面的代码，看看它是否适用于您，如果可以，请将其复制并粘贴到您网站构建器上的HTML片段中。要更改面料和价格，只需进入代码并在''标签中进行编辑。如果您需要帮助，请提问。

<！doctype HTML>< html`enter code here = EN > < meta charset =utf-8> < meta http-equiv =X-UA兼容> < meta name =viewportcontent =width = device-width，initial-scale = 1>< title>面料价格计算器< / title>< head>< style> body {font-family：无衬线字体; color：black;} input [type =text] {color：black;}< / style>< / head>< body> < h2>面料价格计算器< / h2> < form role =formid =pricename =price> < p>选择面料类型：< / p> < select class =id =itemselectonchange =calculate（）> < option id =itempricevalue =1.500> Cotton @£1.50 / sq.m< / option> < option id =itempricevalue =1.250> Denim @£1.25 / sq。m< / option> < option id =itempricevalue =3.000> Wool @£3.00 / sq。m< / option> < option id =itempricevalue =6.000> Silk @£6.00 / sq。m< / option> < option id =itempricevalue =4.000> Leather @£4.00 / sq。m< / option> < option id =itempricevalue =5.000> Nylon @£5.00 / sq。m< / option> < /选择> < p>输入织物的长度和宽度：< / p> < p>< input type =numberid =qtyonchange =calculate（）value =placeholder =Length（m）>< / p> < p>< input type =numberid =qtyaonchange =calculate（）value =placeholder =Width（m）>< / p> < p>面料总价：< / p> < p>< input type =textid =resultvalue =readonly =readonly>< / p> < /形式> < script type =text / javascript> function calculate（price）{var item = document.getElementById（itemselect）。value || 0; var qty = document.getElementById（qty）。value || 0; var qtya = document.getElementById（qtya）。value || 0; item = parseFloat（item）.toFixed（2）; qty = parseFloat（qty）.toFixed（2）; qtya = parseFloat（qtya）.toFixed（2）; var result = parseFloat（item * qty * qtya）.toFixed（2）; 。的document.getElementById（ 结果）值= £ +结果; $ lt; / body>< / html>

我希望这一切都能奏效！

penguin_k

I want to embed a Google Sheets spreadsheet to my website. I would like it so that users can come to my website and they can see and interact with the spreadsheet. The spreadsheet also contains some formulae . For example there is a

width, height , fabric , price column

in this sheet . Fabric is a drop down and it contains some types of fabric with different prices. The formula for calculating the price is:

height*width*fabric value

So whenever user adds width, height, and selects the fabric then it outputs the corresponding value in the price field .

So I want to embed this google sheet in my websit, so that the user can use it to calculate prices without saving to original spreadsheet. I have a php website. If we can't do this using Google Sheets, then is there any way to upload this excel sheet to my website and do the same operation?

Please help.

解决方案

I think I understand what you mean but I'm not entirely sure. From what you said in the question I am assuming that:

• You have a working Google Sheets spreadsheet.
• You have a website and you want to embed this spreadsheet into your website.
• You want people to be able to interact with the spreadsheet, but without changing the formulae, etc...

Ok, so I think you have 2 main options here:

Option 1: embed spreadsheet with permissions

I realise that you have tried this option and that it is not working. Please see option 2. This first option involves taking the spreadsheet that you have already made and putting some editing permissions on it. I'm guessing that in your spreadsheet you have a cell with data validation on it (to create the dropdown menu. If not, can you please say how this is done) and that this is where the user selects an amount to input into your algorithm. If this is the case, then what you want to be doing is this:

1. Open the spreadsheet in Google Sheets and go to the sheet which you want people to interact with.
2. Along the bottom of your screen, locate the current sheet and click the little black arrow next to the name. Then click 'Protect Sheet'.
3. A new window should open on the right. (Screenshot of the 'Protect Sheet' Window) In this new window, click 'Sheet' then in the dropdown below, select the sheet with which the user interacts.
4. Next, tick the 'Except certain cells' box. In the new box, enter the reference to the user input cell. If you have more than one, click 'Add another range' and use this new box for another cell reference. Once your have completed this, click 'Set permissions'. When the new window appears, check that the 'Restrict who can edit this page' option is ticked and that 'Only you' is displayed underneath. Then click 'Done'.
5. Now, to embed this file, what you need to do is go to the 'File' tab along the top left and click 'Publish to the web'. When the window appears, select 'Embed' then in the dropdown select the page that the user will interact with. Then click 'Publish' and hopefully you will be given an embed code that you can use on your website. Please try this out and get back to me with your results.

Option 2: Javascript form

I have found some HTML online and I have added some features to it to suit your needs. Please run the code below and see if it will work for you, and if it will, copy it and paste it into an HTML snippet section on your website builder. To change the fabrics and prices, just go into the code and edit them in the '' tags. If you need help with this please just ask.

<!doctype HTML>
<html`enter code here` lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Fabric price calculator
</title>
<head>
<style>
body {
	font-family: sans-serif;
	color: black;
}
input[type="text"] {
   color: black;
}

</style>
</head>
<body>
		<h2>Fabric price calculator</h2>	
		<form role="form" id="price" name="price">	
		<p>Select fabric type:</p>
		<select class="" id="itemselect" onchange="calculate()">
			<option id="itemprice" value="1.500">Cotton @ £1.50 / sq. m</option>
			<option id="itemprice" value="1.250">Denim @ £1.25 / sq. m</option>
			<option id="itemprice" value="3.000">Wool @ £3.00 / sq. m</option>
			<option id="itemprice" value="6.000">Silk @ £6.00 / sq. m</option>
			<option id="itemprice" value="4.000">Leather @ £4.00 / sq. m</option>
			<option id="itemprice" value="5.000">Nylon @ £5.00 / sq. m</option>
		</select>
		<p>Enter length and width of fabric:</p>
		<p><input type="number" id="qty" onchange="calculate()" value="" placeholder="Length (m)"></p>
		<p><input type="number" id="qtya" onchange="calculate()" value="" placeholder="Width (m)"></p>
		<p>Total price of fabric:</p>
		<p><input type="text" id="result" value="" readonly="readonly"></p>		
	</form>
	
	<script type="text/javascript">
		function calculate(price){
			var item = document.getElementById("itemselect").value || 0;
			var qty = document.getElementById("qty").value || 0;
			var qtya = document.getElementById("qtya").value || 0;
			
			item = parseFloat(item).toFixed(2);
			qty = parseFloat(qty).toFixed(2);
			qtya = parseFloat(qtya).toFixed(2);
			
			var result = parseFloat(item*qty*qtya).toFixed(2);
							
			document.getElementById("result").value="£"+result;
		}
	</script>
</body>
</html>

I hope this all works!

penguin_k

这篇关于在网站中嵌入交互式Google表格而不让用户保存更改[PHP，HTML]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！