سؤال

أرغب في الوصول إلى جداول بيانات Google باستخدام JavaScript فقط (لا .NET ، C#، Java ، إلخ)

انا قد جئت هنا وصدمت عندما عرفت أنه لا يوجد واجهة برمجة تطبيقات لجافا سكريبت للوصول إلى أوراق Google.

من فضلك قل لي كيفية الوصول (إنشاء/تحرير/حذف) أوراق Google باستخدام JavaScript أو أي من أطرافها مثل JQuery.

هل كانت مفيدة؟

المحلول

لقد قمت بإنشاء مكتبة JavaScript بسيطة تسترجع بيانات جدول بيانات Google (إذا تم نشرها) عبر JSON API:

https://github.com/mikeymckay/google-spreadsheet-javaScript

يمكنك أن ترى أنه في العمل هنا:

http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html

نصائح أخرى

تحديث يناير 2018: عندما أجبت على هذا السؤال العام الماضي ، أهملت ذكر أ الثالث طريقة للوصول إلى Google APIs مع JavaScript ، وسيكون ذلك من تطبيقات Node.js انها مكتبة العميل ، لذلك أضفتها أدناه.

إنه مارس 2017, ، ومعظم الإجابات هنا قديمة - تشير الإجابة المقبولة الآن إلى مكتبة تستخدم إصدار API الأقدم. إجابة أكثر حداثة: يمكنك الوصول معظم واجهات برمجة تطبيقات Google مع JavaScript فقط. توفر Google 3 طرق للقيام بذلك اليوم:

  1. كما ذكر في إجابة دان داسكاليسكو, ، يمكنك استخدام برنامج تطبيقات Google, ، حل JavaScript-in-Google's-Cloud. وهذا يعني أن تطبيقات JS من جانب الخادم غير العقدة خارج المتصفح التي تعمل على خوادم Google.
  2. يمكنك أيضا استخدام مكتبة عميل واجهات برمجة تطبيقات Google لـ JavaScript للوصول إلى أحدث Google Sheets REST API على جانب العميل.
    • هنا بعض العينات العامة لاستخدام مكتبة العميل
    • أحدث الأوراق API (v4) كانت صدر في Google I/O 2016 ؛ إنها أقوى بكثير من جميع الإصدارات السابقة ، مما يتيح للمطورين وصولًا برنامجيًا إلى معظم الميزات الموجودة في واجهة مستخدم Sheets
    • ها هو JavaScript QuickStart لمواجهة واجهة برمجة التطبيقات لمساعدتك في البدء
    • هنا عينة "وصفات" (حمولة JSON) لطلبات API الأساسية
    • إذا لم تكن "تحسسيًا" للبيثون (إذا كنت كذلك ، فما عليك سوى التظاهر بأنه رمز كاذب ؛)) ، فقد صنعت العديد من مقاطع الفيديو مع عينات أكثر "العالم الحقيقي" لاستخدام واجهة برمجة التطبيقات التي يمكنك التعلم منها والترحيل إلى JS إذا رغبت في ذلك ( ملاحظة: على الرغم من أنه رمز Python ، فإن معظم طلبات API لديها JSON ومحمولة بسهولة إلى JS):
      1. ترحيل بيانات SQL إلى ورقة (رمز الغوص العميق بريد)
      2. تنسيق النص باستخدام API الأوراق (رمز الغوص العميق بريد)
      3. توليد شرائح من بيانات جدول البيانات (رمز الغوص العميق بريد)
  3. الطريقة الثالثة للوصول إلى Google APIs مع JavaScript هي من تطبيقات Node.js باستخدام مكتبة عميلها. إنه يعمل بشكل مشابه لاستخدام مكتبة عميل JavaScript (Client) الموصوفة أعلاه ، فقط ستحصل على واجهة برمجة التطبيقات نفسها من جانب الخادم. هنا مثال QuickStart Node.js للأوراق. قد تجد أن مقاطع الفيديو المستندة إلى Python أعلاه أكثر فائدة لأنها تصل أيضًا إلى واجهة برمجة التطبيقات من جانب الخادم.

عند استخدام API REST ، تحتاج إلى إدارة وتخزين رمز المصدر الخاص بك وكذلك تنفيذ التفويض عن طريق Rolling Code الخاص بك (انظر العينات أعلاه). يتولى برنامج Apps Script هذا نيابة عنك ، وإدارة البيانات (تقليل "الألم" كما ذكرها Ape-Inago في إجابتهم) ، ويتم تخزين الكود الخاص بك على خوادم Google. لكن وظيفتك مقصورة على ما يوفره برنامج تطبيق Services ، وهو أقدم JS (ES3 + بعض ميزات ES5 وتخصيصات Google) في حين تتيح API REST للمطورين وصولًا أوسع بكثير إلى واجهة برمجة التطبيقات. لكن مهلا ، من الجيد أن يكون لديك خيارات ، أليس كذلك؟ باختصار ، للإجابة على السؤال الأصلي OP ، بدلاً من الصفر ، لدى المطورين ثلاثة طرق للوصول إلى أوراق Google باستخدام JavaScript.

ها هي جوهر.

يمكنك إنشاء جدول بيانات باستخدام Google Sheets API. لا توجد حاليًا طريقة لحذف جدول بيانات باستخدام واجهة برمجة التطبيقات (اقرأ الوثائق). فكر في Google Docs API كطريق لإنشاء المستندات والبحث عنها.

يمكنك إضافة/إزالة أوراق العمل داخل جدول البيانات باستخدام موجزات ورقة العمل.

يتم تحديث جدول البيانات من خلال أيضًا قائمة الخلاصة القائمة أو الخلاصات القائمة على الخلية.

يمكن إجراء قراءة جدول البيانات إما من خلال واجهات برمجة تطبيقات جداول بيانات Google المذكورة أعلاه أو ، ، للأوراق المنشورة فقط, ، باستخدام لغة استعلام API Google Visualization للاستعلام عن البيانات (التي يمكن أن ترجع يؤدي إلى تنسيق جدول CSV أو JSON أو HTML).


ننسى jQuery. jQuery هي قيمة فقط إذا كنت تعبر DOM. نظرًا لأن الغاز (البرمجة النصية لتطبيقات Google) لا يستخدم Dom jQuery لن يضيف أي قيمة إلى الكود الخاص بك. التمسك بالفانيليا.

أنا مندهش حقًا من أن لا أحد قدم هذه المعلومات في إجابة حتى الآن. ليس فقط يستطيع يتم ذلك ، لكن من السهل نسبيًا استخدام الفانيليا JS. الاستثناء الوحيد هو واجهة برمجة تطبيقات Google Visualization التي هي جديدة نسبيًا (اعتبارًا من عام 2011). تعمل واجهة برمجة تطبيقات التصور أيضًا حصريًا من خلال سلسلة استعلام HTTP URI.

تحديث 2016: أسهل طريقة هي استخدام واجهة برمجة تطبيقات Google Apps Script ، ولا سيما خدمة جدول البيانات. هذا يعمل مع الأوراق الخاصة ، على عكس الإجابات الأخرى التي تتطلب نشر جدول البيانات.

سيتيح لك ذلك ربط رمز JavaScript إلى ورقة Google ، وتنفيذه عند فتح الورقة ، أو عند تحديد عنصر قائمة (يمكنك تحديده).

ها هو QuickStart/Demo. الرمز يشبه هذا:

// Let's say you have a sheet of First, Last, email and you want to return the email of the
// row the user has placed the cursor on.
function getActiveEmail() {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  var activeRow = .getActiveCell().getRow();
  var email = activeSheet.getRange(activeRow, 3).getValue();

  return email;
}

يمكنك أيضا نشر البرامج النصية مثل تطبيقات الويب.

هناك حل لا يتطلب من المرء نشر جدول البيانات. ومع ذلك ، يجب مشاركة الورقة. وبشكل أكثر تحديدًا ، يحتاج المرء إلى مشاركة الورقة بطريقة يمكن لأي شخص لديه الرابط الوصول إلى جدول البيانات. بمجرد الانتهاء من ذلك ، يمكن للمرء استخدام Google Sheets HTTP API.

أولاً ، تحتاج إلى مفتاح Google API. الرأس هنا:https://developers.google.com/places/web-service/get-api-keyNB. يرجى العلم بالتداعيات الأمنية لوجود مفتاح API المتاح للجمهور: https://support.google.com/googleapi/answer/6310037

احصل على الكل بيانات لجدول بيانات - تحذير ، يمكن أن يكون هذا الكثير من البيانات.

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true

الحصول على ورقة البيانات الوصفية

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}

احصل على مجموعة من الخلايا

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}!{cellRange}?key={yourAPIKey}

الآن مسلحًا بهذه المعلومات ، يمكن للمرء استخدام Ajax لاسترداد البيانات ثم معالجتها في JavaScript. أود أن أوصي باستخدام axios.

var url = "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true";                                                             
axios.get(url)
  .then(function (response) {
    console.log(response);                                                                                                                                                    
  })
  .catch(function (error) {
    console.log(error);                                                                                                                                                       
  });                

تعديل: تم الرد على هذا قبل إصدار واجهة برمجة تطبيقات Google Doc. نرى إجابة إيفان بلايس و إجابة دان داسكاليسكو لمزيد من المعلومات الحديثة.

يبدو أنك تستطيع ، لكنه ألم في الاستخدام. يتضمن استخدام واجهة برمجة تطبيقات بيانات Google.

http://gdatatips.blogspot.com/2008/12/using-javascript-lient-library-w-non.html

"تحتوي مكتبة عميل JavaScript على أساليب مساعد للتقويم والاتصالات والمدون ومقال Google. ومع ذلك ، يمكنك استخدامها مع أي واجهة برمجة تطبيقات بيانات Google للوصول إلى الخلاصات المصادقة/الخاصة. يستخدم هذا المثال واجهة برمجة تطبيقات DoClist."

ومثال على كتابة أداة تتفاعل مع جداول البيانات: http://code.google.com/apis/spreadsheets/gadgets/

سيكون "JavaScript Accessing Docs" مملة للتنفيذ ، وعلاوة على ذلك ، فإن وثائق Google ليست سهلة الحصول عليها. لدي بعض الروابط الجيدة للمشاركة التي يمكنك من خلالها تحقيق وصول JS إلى GDOC:

http://code.google.com/apis/documents/docs/3.0/developers_guide_protocol.html#uploadingdocs

http://code.google.com/apis/spreadsheets/gadgets/

http://code.google.com/apis/gdata/docs/js.html

http://www.mail-archive.com/google-help-dataapi@googlegroups.com/msg01924.html

قد تكون هذه سوف تساعدك على الخروج ..

آسف ، هذه إجابة رديئة. يبدو أن هذا كان القضية لمدة عامين تقريبًا ، لا تنفاسك.

هذا هو الطلب الرسمي الذي تستطيع "نجمة"

ربما الأقرب الذي يمكنك المجيء قم بتشغيل الخدمة الخاصة بك مع Google App Engine/Python وفضح أي مجموعة فرعية تحتاجها مع مكتبة JS الخاصة بك. على الرغم من أنني أحب أن أحصل على حل أفضل بنفسي.

في هذا العالم السريع المتغير ، معظم هذه الرابطات هي Obsolet.

الآن يمكنك استخدام Google Drive Web APIs:

لهذا النوع من الأشياء التي يجب عليك استخدامها جداول الانصهار Google. ال API تم تصميمه لهذا الغرض.

يمكنك القيام بذلك باستخدام ورقة و tabletop.js

  1. مثال من git
  2. مثال آخر

أنا أبني شتاين لمساعدتك على القيام بذلك. كما يوفر حل HTML فقط ، إذا كنت ترغب في عرض البيانات مباشرة من الورقة. تحقق من ذلك في steinhq.com.

يمكنك قراءة بيانات جداول بيانات Google Sheets في JavaScript باستخدام موصل Sheets RGRAPH:

https://www.rgraph.net/canvas/docs/import-data-from-google-seets.html

في البداية (قبل بضع سنوات) اعتمد هذا على بعض وظائف Rgraph للعمل سحرها - ولكن الآن يمكن أن تعمل مستقل (أي لا تتطلب مكتبة RGRAPH المشتركة).

بعض رمز المثال (هذا المثال يجعل مخطط rgraph):

<!-- Include the sheets library -->
<script src="RGraph.common.sheets.js"></script>

<!-- Include these two RGraph libraries to make the chart -->
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>

<script>
    // Create a new RGraph Sheets object using the spreadsheet's key and
    // the callback function that creates the chart. The RGraph.Sheets object is
    // passed to the callback function as an argument so it doesn't need to be
    // assigned to a variable when it's created
    new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
    {
        // Get the labels from the spreadsheet by retrieving part of the first row
        var labels = sheet.get('A2:A7');

        // Use the column headers (ie the names) as the key
        var key = sheet.get('B1:E1');

        // Get the data from the sheet as the data for the chart
        var data   = [
            sheet.get('B2:E2'), // January
            sheet.get('B3:E3'), // February
            sheet.get('B4:E4'), // March
            sheet.get('B5:E5'), // April
            sheet.get('B6:E6'), // May
            sheet.get('B7:E7')  // June
        ];

        // Create and configure the chart; using the information retrieved above
        // from the spreadsheet
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxisLabels: labels,
                xaxisLabelsOffsety: 5,
                colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
                shadow: false,
                colorsStroke: 'rgba(0,0,0,0)',
                yaxis: false,
                marginLeft: 40,
                marginBottom: 35,
                marginRight: 40,
                key: key,
                keyBoxed: false,
                keyPosition: 'margin',
                keyTextSize: 12,
                textSize: 12,
                textAccessible: false,
                axesColor: '#aaa'
            }
        }).wave();
    });
</script>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top