Hinzufügen von Bildern, Videos und Dateien zu OneNote-Seiten
Gilt für Heimanwender-Notizbücher auf OneDrive | Enterprise-Notizbücher auf Microsoft 365
Sie können Elemente der Typen img, object und iframe verwenden, um bei der Erstellung oder Aktualisierung von OneNote-Seiten Bilder, Videos und Dateien zur Seite hinzuzufügen.
- Verwenden Sie img, um ein Bild auf der Seite zu rendern.
- Verwenden Sie iframe, um ein Video in die Seite einzubetten.
- Verwenden Sie object, um der Seite eine Dateianlage hinzuzufügen.
Hinzufügen von Bildern
Bilder können mittels URL-Verweis oder durch das Senden von Rohdaten hinzugefügt werden. Microsoft Graph unterstützt die folgenden Methoden zum Hinzufügen von Bildern, Logos und Fotos zu OneNote-Seiten:
Hinzufügen öffentlicher Bilder aus dem Internet
Verwenden Sie img mit src="https://image-url", und geben Sie die URL eines öffentlich zugänglichen Bilds an. Das Bild wird auf der OneNote-Seite gerendert.
Hinzufügen von Bildern mithilfe von Binärdaten
Verwenden Sie img mit src="name:image-block-name", und senden Sie die Bilddatei in einem Datenteil einer mehrteiligen Anforderung. Das Bild wird auf der OneNote-Seite gerendert.
Hinzufügen von Webseitenmomentaufnahmen
Verwenden Sie img mit data-render-src="https://webpage-url", und geben Sie die URL einer Webseite an. Auf der OneNote-Seite wird eine Momentaufnahme der gesamten Webseite gerendert.
Hinzufügen von HTML-basiert gerenderten Bildern
Verwenden Sie img mit data-render-src="name:html-block-name", und senden Sie HTML-Code in einem Datenteil einer mehrteiligen Anforderung. Der HTML-Code wird auf der OneNote-Seite als Bild gerendert.
Hinzufügen von Bildern von PDF-Inhalten
Verwenden Sie <img data-render-src="name:part-name" />, und senden Sie die PDF-Datei in einem Datenteil einer mehrteiligen Anforderung. Jede PDF-Seite wird auf der OneNote-Seite als separates Bild gerendert.
Hinzufügen von Bilddateien als Dateianlage
Verwenden Sie object mit data="name:file-block-name" data-attachment="file-name.file-ext" type="media-type", und senden Sie eine Bilddatei in einem Datenteil einer mehrteiligen Anforderung. Der OneNote-Seite wird eine Dateianlage hinzugefügt, und es wird ein Dateisymbol angezeigt.
Hinweis
Um Bilder auf einer OneNote-Seite abzurufen, senden Sie zunächst eine GET-Anforderung für den Seiteninhalt. Das gibt die URLs der Bildressourcen auf der Seite zurück. Dann senden Sie separat eine GET-Anforderung je Bildressource.
Attribute von Bildern
Elemente des Typs img können optional Attribute der Typen alt, height und width enthalten sowie die Formatattribute max-width und max-height.
Bildmedientypen
Microsoft Graph unterstützt die Bildtypen TIFF, PNG, GIF, JPEG und BMP. Soll ein anderes Bildformat ohne vorherige Konvertierung dargestellt werden, müssen Sie die Binärdaten senden, in einer mehrteiligen Anforderung. Base64 muss nicht verwendet werden, und auch eine anderweitige Codierung der gesendeten Binärdaten ist nicht erforderlich.
Hinweis
Die API erkennt den ursprünglichen Eingabebildtyp und gibt ihn als data-fullres-src-type-Attribut im Ausgabe-HTML-Code zurück. Daneben gibt die API auch den Bildtyp des optimierten Bilds zurück, in data-src-type.
Unter Einschränkungen sind alle Einschränkungen aufgeführt, die bei der Erstellung von Seiten mit Medien gelten.
Hinzufügen öffentlicher Bilder aus dem Internet
Geben Sie im Eingabe-HTML-Code Ihrer Anforderung <img src="https://..." /> an, und setzen Sie die URL eines öffentlich verfügbaren Bilds im Attribut src.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image: Public URL</title>
<meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
</head>
<body>
<p>This page displays an image from the web.</p>
<img src="https://..." width="300"/>
</body>
</html>
--MyAppPartBoundary--
Hinzufügen von Bildern mithilfe von Binärdaten
Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung <img src="name:part-name" /> an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der die binären Bilddaten enthält. Senden Sie die Binärdaten in unveränderter Form: Verwenden Sie weder Base64 noch eine andere Form der Codierung.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image: Image binary data</title>
<meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
</head>
<body>
<p>This page displays the uploaded image.</p>
<img src="name:image-block-name" alt="a cool image" width="500"/>
</body>
</html>
--MyAppPartBoundary
Content-Disposition: form-data; name="MyAppPictureId"
Content-Type: image/jpeg
... image binary data ...
--MyAppPartBoundary--
Hinzufügen von Webseitenmomentaufnahmen
Sie können mit Microsoft Graph Momentaufnahmen ganzer Webseiten erstellen und in neue Seiten einfügen. Diese Methode ist nützlich, um Webseiten zu archivieren oder komplexe Webseiten mit Features abzubilden, die OneNote nicht unterstützt (beispielsweise bestimmte CSS-Formatierungen).
Geben Sie im Eingabe-HTML-Code Ihrer Anforderung <img src="https://..." /> an, und setzen Sie die URL der einzufügenden Webseite im Attribut src.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image: Webpage capture</title>
<meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
</head>
<body>
<p>This page displays an image of the webpage.</p>
<img data-render-src="https://www.onenote.com" width="200"/>
</body>
</html>
--MyAppPartBoundary--
Hinzufügen von HTML-basiert gerenderten Bildern
Wenn Sie den HTML-Code als Datenblock übergeben, dürfen darin weder aktive Inhalte enthalten sein, die Benutzeranmeldeinformationen erfordern, noch vorab geladene Browser-Plug-Ins. Das Modul, das Microsoft Graph verwendet, um die HTML-Seite als Bild zu rendern, kann Benutzer nicht anmelden und enthält keine Plug-Ins wie Adobe Flash oder Apple QuickTime. Das bedeutet außerdem: Dynamisch geladene Inhalte, wie sie in einem AJAX-Skript vorkommen können, werden nicht angezeigt, wenn zum Abrufen der Daten Benutzeranmeldeinformationen oder Cookies erforderlich sind.
Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung <img data-render-src="name:part-name" /> an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der den HTML-Code enthält.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image: HTML block</title>
<meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
</head>
<body>
<p>This page displays the block of HTML as an image.</p>
<img data-render-src="name:html-block-name" alt="a cool image" width="500"/>
</body>
</html>
--MyAppPartBoundary
Content-Disposition: form-data; name="html-block-name"
Content-Type: text/html
<html>
<body>
<h1>This HTML will render as an image</h1>
<p><b>Don't</b> try to embed another <i>data-render-src</i> type-image inside the HTML part--
it won't work. Instead, use URL-based real images like this:</p>
<img src="https://cdn.onenote.net/1664161560_Images/OneNote.ico" />
</body>
</html>
--MyAppPartBoundary--
Hinzufügen von Bilddateien als Anlage
Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" /> an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der die binären Bilddaten enthält. Senden Sie die Binärdaten in unveränderter Form: Verwenden Sie weder Base64 noch eine andere Form der Codierung.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image: Binary image data as file attachment</title>
<meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
</head>
<body>
<p>This page contains the image as a file attachment.</p>
<object data-attachment="image-file.jpg" data="name:image-block-name" type="image/jpeg" />
</body>
</html>
--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg
... binary file data ...
--MyAppPartBoundary--
Weitere Informationen zu Dateimedientypen finden Sie unter diesem Link.
Hinzufügen von Videos
Wenn Sie Videos in OneNote-Seiten einbetten möchten, können Sie <iframe data-original-src="https://..." /> im Eingabe-HTML-Code verwenden.
Unterstützte Videowebsites
- Dailymotion
- Office Mix
- Sway
- Sketchfab
- TED
- YouTube
- Vimeo
- Vine
„iframe“-Attribute
data-original-src
Erforderlich. URL des Videos.
Beispiel: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
width
Optional. Breite des „iframe“-Elements, in dem das Video enthalten ist. Der Standardwert ist 480.
Beispiel: width="300"
height
Optional. Höhe des „iframe“-Elements, in dem das Video enthalten ist. Der Standardwert ist 360.
Beispiel: height="300"
Beispiel
Geben Sie im Eingabe-HTML-Code Ihrer Anforderung <iframe data-original-src="https://..." /> an, und setzen Sie die URL des Videos im Attribut data-original-src.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an embedded video</title>
</head>
<body>
<iframe data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" width="340" height="280"/>
</body>
</html>
--MyAppPartBoundary--
Hinzufügen von Dateien
Zum Hinzufügen von Dateianlagen zu OneNote-Seiten verwenden Sie ein Element des Typs object im Eingabe-HTML-Code. Wenn Sie eine PDF-Datei hinzufügen möchten, können Sie die einzelnen PDF-Seiten mithilfe eines Elements des Typs img als Bild rendern.
Verwenden Sie <object .../>, und senden Sie die Datei in einem Datenteil einer mehrteiligen Anforderung. Der OneNote-Seite wird eine Dateianlage hinzugefügt, die als Dateisymbol angezeigt wird.
Hinzufügen von Bildern von PDF-Inhalten
Verwenden Sie <img data-render-src="name:part-name" />, und senden Sie eine PDF-Datei in einem Datenteil einer mehrteiligen Anforderung. Jede PDF-Seite wird auf der OneNote-Seite als separates Bild gerendert.
Dateiattribute
Elemente des Typs object erfordern die folgenden Attribute:
data-attachment
Name und Dateierweiterung der Datei, die auf der OneNote-Seite angezeigt werden soll
Beispiel: data-attachment="filename.docx"
data
Name des Textteils in der mehrteiligen Anforderung, der die binären Dateidaten enthält. Microsoft Graph bietet keine Unterstützung für die Übergabe von URL-Verweisen in diesem Attribut.
Beispiel: data="name:part-name"
type
Medientyp der Datei. Er legt fest, welches Dateisymbol auf der Seite angezeigt werden soll und welche Anwendung gestartet wird, sobald der Benutzer die Datei auf dem Gerät über OneNote aktiviert.
Beispiel: type="application/pdf"
Dateimedientypen
Microsoft Graph verwendet für angefügte Dateien vordefinierte Dateitypensymbole. Erkennt die API den Dateityp nicht, wird ein generisches Symbol verwendet. Nachfolgend sind verschiedene häufig vorkommende Dateitypen aufgeführt, die von der API erkannt werden:
- application/pdf
- application/vnd.openxmlformats-officedocument.wordprocessingml.document
- application/vnd.openxmlformats-officedocument.presentationml.presentation
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
- image/png
- image/jpeg
- image/gif
- audio/wav
- video/mp4
- application/msword
- application/mspowerpoint
- application/excel
Unter Einschränkungen sind alle Einschränkungen aufgeführt, die bei der Erstellung von Seiten mit Medien gelten.
Hinzufügen von Dateianlagen
Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" /> an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der die binären Dateidaten enthält. Senden Sie die Binärdaten in unveränderter Form: Verwenden Sie weder Base64 noch eine andere Form der Codierung.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with an image file attachment</title>
</head>
<body>
<p>This is an image file attachment.</p>
<object data-attachment="Logo.jpg" data="name:logo1-file" type="image/jpeg" />
</body>
</html>
--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg
... binary file data ...
--MyAppPartBoundary--
Hinzufügen von Bildern von PDF-Inhalten
Geben Sie im Eingabe-HTML-Code im Teil Presentation Ihrer Anforderung <img data-render-src="name:part-name" ... /> an. Dabei ist part-name der eindeutige Bezeichner des Datenteils in Ihrer mehrteiligen Anforderung, der die binären Dateidaten enthält. Senden Sie die Binärdaten in unveränderter Form: Verwenden Sie weder Base64 noch eine andere Form der Codierung.
Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}
--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>A page with images of the pages of a PDF file</title>
</head>
<body>
<p>The pages of this PDF file render as images.</p>
<img data-render-src="name:file-part" alt="PDF file as images" width="500"/>
</body>
</html>
--MyAppPartBoundary
Content-Disposition: form-data; name="file-part"
Content-Type: application/pdf
... binary file data ...
--MyAppPartBoundary--
Größenbeschränkungen bei Anforderungen des Typs „Post pages“
Für das Senden von Bild- und Dateidaten gelten folgende Einschränkungen:
Für die REST-API von Microsoft Graph gilt ein Grenzwert von 4 MB für Anforderungen. Alles, was diesen Grenzwert überschreitet, schlägt mit der Fehlermeldung "Anforderung zu groß (413)" fehl.
Die Anforderungsgrenze der zugrundeliegenden OneNote-REST-API ist höher, aber Sie können nicht über die Microsoft Graph-API darauf zugreifen.
- Die maximal zulässige Gesamtgröße von POST-Anforderungen liegt bei etwa 70 MB, einschließlich Bildern, Dateien und anderer Daten. Das tatsächlich Limit hängt von der Downstreamcodierung ab, daher ist keine feste Bytezahl als Höchstgrenze gesetzt. Anforderungen, die das Limit überschreiten, geben möglicherweise unzuverlässige Ergebnisse zurück.
- Die maximal zulässige Größe pro Datenteil liegt bei 25 MB, einschließlich des Headers des jeweiligen Teils. Datenteile, die dieses Limit überschreiten, werden von Microsoft Graph abgelehnt.
Die maximal zulässige Anzahl von Bildern pro Seite beträgt 150. Bei Verwendung des Attributs
src="https://..."ignoriert die API alle Tags des Typs img, die über dieses Limit hinausgehen.Die maximal zulässige Anzahl von Datenteilen pro POST-Anforderung liegt bei 6, einschließlich des zwingend erforderlichen Teils Presentation.
Jede Anforderung kann bis zu fünf img-Elemente enthalten, die data-render-src verwenden, und ein Objektelement , das data-render-src verwendet. Zusätzliche Bild- und Dateiverweise werden ignoriert.
Die maximal zulässige Anzahl von Bildern pro POST-Anforderung liegt bei 30, unabhängig von der Methode, über die sie an die API gesendet werden. Alle weiteren Bilder werden ignoriert. Wenn Sie eine Webseite mit vielen Bildern abbilden möchten, empfiehlt sich die Erstellung einer Momentaufnahme der gesamten Seite.
Anwendungsfälle: HTML vs. data-render-src
Ob Sie den HTML-Code direkt auf der OneNote-Seite einfügen oder das Attribut data-render-src verwenden sollten, hängt von verschiedenen Faktoren ab. Berücksichtigen Sie bei Ihrer Entscheidung Folgendes:
Komplexer HTML-Code sollte per data-render-src an das Renderingmodul gesendet werden. Eine manuelle Anpassung des HTML-Codes an die Anforderungen von Microsoft Graph empfiehlt sich nicht. Dies gilt auch für HTML-Code mit nicht unterstützten Tags.
Für akkurates Seitenrendering unter Beibehaltung des Layouts und Designs der Seite empfiehlt sich die Verwendung des Renderingmoduls per data-render-src.
Direkt bearbeitbarer Text lässt sich häufig am besten durch direktes Einfügen des HTML-Codes in die Seite erreichen. Die gerenderten Bilder werden von einem System für die optische Zeichenerkennung (OCR) gescannt, sind jedoch nicht unbedingt identisch.
Momentaufnahmen bestimmter Zeitpunkte zu Verlaufs- oder Archivierungszwecken sollten mithilfe der Methode data-render-src angefertigt werden.
Das Markieren eines Webseitenentwurfs für Überprüfungen ist ein Bereich, in dem data-render-src besonders hervorsticht. Mithilfe der Freihandfunktionen von OneNote können Sie auf einem Bild zeichnen, um Änderungen anzugeben oder bestimmte Abschnitte hervorzuheben. Wenn die Webseite als Bild vorliegt, ist das wesentlich einfacher.
Sehr große Bilder oder Bilder in Formaten, die OneNote nicht direkt unterstützt, lassen sich mit dem Attribut data-render-src mitunter einfacher als Miniaturansicht anzeigen und konvertieren, als dies mit eigenem Code möglich wäre. Selbst wenn das Bild auch online verfügbar ist: Wenn Sie die Daten in die POST-Anforderung einbetten, steht die Seitenabbildung OneNote-Benutzern manchmal schneller zur Verfügung, da zur Erstellung der OneNote-Seite insgesamt weniger Roundtrips nötig sind.
Manchmal können Sie am einfachsten herausfinden, welche Methode für Ihre Benutzer die beste ist, indem sie während der App-Entwicklung beide Varianten testen.
Berechtigungen
Zum Erstellen oder Aktualisieren von OneNote-Seiten müssen Sie die entsprechenden Berechtigungen anfordern. Wählen Sie die niedrigste Stufe, die erforderlich ist, damit Ihre App korrekt funktioniert.
Berechtigungen für BEITRAG-Seiten
- Notes.Create
- Notes.ReadWrite
- Notes.ReadWrite.All
Berechtigungen für PATCH-Seiten
- Notes.ReadWrite
- Notes.ReadWrite.All
Weitere Informationen zu Berechtigungsbereichen und deren Funktionsweise finden Sie unter OneNote-Berechtigungsbereiche.
Verwandte Inhalte
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für