Create google docs in google drive Javascript

Question

I am creating an application using asp.net mvc and javascript in which I want to create a word document in my drive and view my created document in new tab,

I created a project in developer console and got my client Id and api key

I am unable to find any examples regarding this, below is my code of google docs api which is working fine,

<body>
<p>
    Google Docs API Quickstart
</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content"></pre>

<script type="text/javascript">
    // Client ID and API key from the Developer Console
    var CLIENT_ID = '<YOUR_CLIENT_ID>'
    var API_KEY = '<YOUR_API_KEY>';

    // Array of API discovery doc URLs for APIs used by the quickstart
    var DISCOVERY_DOCS = ['https://docs.googleapis.com/$discovery/rest?version=v1'];

    // Authorization scopes required by the API; multiple scopes can be
    // included, separated by spaces.
    var SCOPES = "https://www.googleapis.com/auth/documents.readonly";

    var authorizeButton = document.getElementById('authorize_button');
    var signoutButton = document.getElementById('signout_button');

    /**
     *  On load, called to load the auth2 library and API client library.
     */
    function handleClientLoad() {
        gapi.load('client:auth2', initClient);
    }

    /**
     *  Initializes the API client library and sets up sign-in state
     *  listeners.
     */
    function initClient() {
        gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        }).then(function () {
            // Listen for sign-in state changes.
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

            // Handle the initial sign-in state.
            updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
            authorizeButton.onclick = handleAuthClick;
            signoutButton.onclick = handleSignoutClick;
        });
    }

    /**
     *  Called when the signed in status changes, to update the UI
     *  appropriately. After a sign-in, the API is called.
     */
    function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
            authorizeButton.style.display = 'none';
            signoutButton.style.display = 'block';
            printDocTitle();
        } else {
            authorizeButton.style.display = 'block';
            signoutButton.style.display = 'none';
        }
    }

    /**
     *  Sign in the user upon button click.
     */
    function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
    }

    /**
     *  Sign out the user upon button click.
     */
    function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
    }

    /**
     * Append a pre element to the body containing the given message
     * as its text node. Used to display the results of the API call.
     *
     * @param {string} message Text to be placed in pre element.
     */
    function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
    }

    /**
     * Prints the title of a sample doc:
     * https://docs.google.com/document/d/195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE/edit
     */
    function printDocTitle() {
        gapi.client.docs.documents.get({
            documentId: '1Q0MGsSSqovVRiDadfnq9eCinoBnOuQn4hnh3-pOsbME'
        }).then(function (response) {
            var doc = response.result;
            var title = doc.title;
            appendPre('Document "' + title + '" successfully found.\n');
        }, function (response) {
            appendPre('Error: ' + response.result.error.message);
        });
    }
</script>
<script async="" defer="" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()" src="https://apis.google.com/js/api.js"></script>

Tanaike · Accepted Answer · 2022-02-04 08:26:56Z

1

I believe your goal is as follows.

You want to create a new Google Document using Google Docs API with Javascript.
You have already been able to use Google Docs API.

In this case, how about the following modification?

Modified script:

First, please modify your scope from https://www.googleapis.com/auth/documents.readonly to https://www.googleapis.com/auth/documents.

And, please modify your script as follows.

From:

function printDocTitle() {
    gapi.client.docs.documents.get({
        documentId: '1Q0MGsSSqovVRiDadfnq9eCinoBnOuQn4hnh3-pOsbME'
    }).then(function (response) {
        var doc = response.result;
        var title = doc.title;
        appendPre('Document "' + title + '" successfully found.\n');
    }, function (response) {
        appendPre('Error: ' + response.result.error.message);
    });
}

To:

function printDocTitle() {
    gapi.client.docs.documents.create({
      resource: {title: "sampleTitle"}
    }).then(function (response) {
        var doc = response.result;
        var title = doc.title;
        appendPre('Document "' + title + '" successfully found.\n');
    }, function (response) {
        appendPre('Error: ' + response.result.error.message);
    });
}

When this script is run, a new Google Document with the title of "sampleTitle" is created to the root folder.

Reference:

Method: documents.create

answered Feb 4, 2022 at 8:26

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DocPro Over a year ago

hello thank you for your response, I am getting the following error-> Error: Request had insufficient authentication scopes.

Tanaike Over a year ago

@DocPro Thank you for replying. I apologize for the inconvenience. About ` I am getting the following error-> Error: Request had insufficient authentication scopes., in this case, it is considered that the scope is required to be modified. Please use googleapis.com/auth/documents` as the scope. Can you confirm it again?

Collectives™ on Stack Overflow

Create google docs in google drive Javascript

1 Answer 1

Modified script:

From:

To:

Reference:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Modified script:

From:

To:

Reference:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related