React应用中生成行程PDF并创建Google Drive可分享链接的方法

Nice work getting the PDF generation up and running with jsPDF! To create a shareable Google Drive link for that client-side generated PDF, here's a step-by-step approach using the Google Drive API:

First, you need to configure your project in the Google Cloud Console:

• Create a new project (or use an existing one)
• Search for and enable the Google Drive API
• Navigate to "Credentials" > "Create Credentials" > "OAuth client ID"
• Select "Web application" as the application type
• Add your app's origin (e.g., http://localhost:3000 for local development) to the "Authorized JavaScript origins" list
• Add a redirect URI (can use the same origin for simplicity during testing)
• Save the client ID you get—you'll need this later

Add the Google API script to your public/index.html to load the gapi library:

<script src="https://apis.google.com/js/api.js"></script>

You need to authenticate the user with Google to get an access token for the Drive API. Add this logic to your React component:

const initGoogleAuth = () => {
  gapi.load('client:auth2', () => {
    gapi.client.init({
      clientId: 'YOUR_CLIENT_ID_FROM_CONSOLE',
      scope: 'https://www.googleapis.com/auth/drive.file' // Minimal scope for uploading files
    }).then(() => {
      const authInstance = gapi.auth2.getAuthInstance();
      // Trigger login on a button click, for example
      document.getElementById('login-btn').addEventListener('click', () => {
        authInstance.signIn().then(() => {
          console.log('User authenticated');
          // Proceed to upload PDF once logged in
        });
      });
    });
  });
};

// Initialize auth when your component mounts
useEffect(() => {
  initGoogleAuth();
}, []);

Once the user is authenticated, convert your jsPDF output to a Blob, upload it to Drive, and set up public sharing:

const uploadPdfToDrive = () => {
  // Your existing jsPDF generation code
  const doc = new jsPDF();
  doc.fromHTML(html); // Assuming `html` is your target content
  const pdfBlob = doc.output('blob'); // Convert PDF to Blob format

  // Define file metadata for Google Drive
  const fileMetadata = {
    name: 'YourItinerary.pdf',
    mimeType: 'application/pdf'
  };

  // Wrap metadata and blob in FormData for upload
  const formData = new FormData();
  formData.append('metadata', new Blob([JSON.stringify(fileMetadata)], { type: 'application/json' }));
  formData.append('file', pdfBlob);

  // Upload using fetch (gapi has limited support for binary uploads directly)
  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
    method: 'POST',
    headers: new Headers({
      'Authorization': `Bearer ${gapi.auth.getToken().access_token}`
    }),
    body: formData
  })
  .then(res => res.json())
  .then(uploadedFile => {
    // Set permission to allow anyone with the link to view
    return gapi.client.drive.permissions.create({
      fileId: uploadedFile.id,
      requestBody: {
        role: 'reader',
        type: 'anyone'
      }
    });
  })
  .then(() => {
    // Fetch the shareable web view link
    return gapi.client.drive.files.get({
      fileId: uploadedFile.id,
      fields: 'webViewLink'
    });
  })
  .then(result => {
    const shareableLink = result.result.webViewLink;
    console.log('Shareable PDF link:', shareableLink);
    // Display this link to your user (e.g., store in a state variable)
  })
  .catch(err => console.error('Drive upload error:', err));
};

• User Consent: Since this is client-side, the user must log in with their Google account—you can't upload files silently without their explicit permission.
• Scope Limitation: Using drive.file ensures the user only grants access to the specific file you upload, not their entire Drive storage.
• OAuth Consent Screen: For production, you'll need to configure the OAuth consent screen in the Google Cloud Console and possibly submit it for verification if your app is public-facing.
• Error Handling: Add proper error handling for authentication failures, upload issues, or permission errors to make the experience smoother for users.

内容的提问来源于stack exchange，提问作者Meticulous