Table of contents
TOC
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Zuletzt aktualisiert: 25.07.2018

Fügen Sie Bilder, Videos und Dateien zu OneNote-Seiten hinzu

Gilt für: Heimanwender-Notizbücher in OneDrive | Unternehmensnotizbücher in Office 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 per URL-Referenz oder durch Senden von Rohdaten hinzugefügt werden. Die OneNote-API unterstützt die folgenden Methoden zum Hinzufügen von Bildern, Logos und Fotos zu OneNote-Seiten.

Ein öffentliches Bild aus dem Web hinzufügen

Verwenden Sie img mit src="http://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="http://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.

Bilder von PDF-Datei-Inhalten hinzufügen

Verwenden Sie <img data-render-src="name:part-name" /> und senden Sie die PDF-Datei im Datenteil einer mehrteiligen Anfrage. Rendert jede PDF-Seite als separates Bild auf der OneNote-Seite.

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. Fügt der OneNote-Seite einen Dateianhang hinzu und zeigt ein Dateisymbol an.

Um Bilder auf einer OneNote-Seite zu erhalten, senden Sie zuerst eine GET-Anfrage für den Seiteninhalt. Dadurch werden die URLs zu den Bildressourcen auf der Seite zurückgegeben. Dann trennen Sie GET-Anfragen und die Bildressourcen.


Attribute von Bildern

Ein img Element kann optional die Attribute alt, Höheund Breite und die Stil-Attribute max-Breite und max-Höheenthalten.

Bildmedientypen

Die OneNote-API unterstützt die Bildtypen TIFF, PNG, GIF, JPEG und BMP. Um ein Bild aufzunehmen, das ein anderes Format verwendet, das Sie nicht konvertieren möchten, senden Sie die binären Daten in einer mehrteiligen Anfrage. Sie müssen Base64 nicht verwenden oder sonst kodieren Sie die von Ihnen gesendeten Binärdaten.

Die API erkennt den ursprünglichen Eingabebildtyp und gibt ihn als data-fullres-src-type -Attribut im output HTMLzurü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="http://..." /> 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="http://..." 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--  

Einen Webseiten-Schnappschuss hinzufügen

Mit der OneNote-API können Sie Schnappschüsse ganzer Webseiten aufnehmen und in neue Seiten einfügen. Diese Methode ist nützlich, um Webseiten zu archivieren oder komplexe Webseiten mit Funktionen zu erfassen, die OneNote nicht unterstützt (wie einige CSS).

Geben Sie im Eingabe-HTML-Code Ihrer Anforderung <img src="http://..." /> 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="http://www.onenote.com" width="200"/>
  </body>
</html>

--MyAppPartBoundary--  

Hinzufügen von HTML-basiert gerenderten Bildern

Wenn Sie das HTML als Datenblock übergeben, stellen Sie sicher, dass kein aktiver Inhalt vorhanden ist, der eine Benutzeranmeldung oder ein vorinstalliertes Browser-Plugin erfordert. Das Modul, das die OneNote-API verwendet, um die HTML-Seite in ein Bild zu rendern, kann keinen Benutzer einloggen und enthält keine Plug-Ins wie Adobe Flash, Apple QuickTime usw. Das bedeutet auch, dass dynamisch geladene Inhalte, wie z.B. ein AJAX-Skript, nicht angezeigt werden, wenn für das Abrufen der Daten Benutzer-Anmeldeinformationen 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="http://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="http://..." /> 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"

Breite

Optional. Breite des „iframe“-Elements, in dem das Video enthalten ist. Der Standardwert ist 480.
Beispiel: width="300"

Höhe

Optional. Höhe des „iframe“-Elements, in dem das Video enthalten ist. Der Standardwert ist 360.
Beispiel: height="300"


Beispiel

Fügen Sie in die HTML-Eingabe Ihrer Anfrage <iframe data-original-src="http://..." /> ein und geben Sie die URL des Videos für das Attribut data-original-src an.

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.

Hinzufügen eines Dateianhangs

Verwenden Sie <object .../> und senden Sie die Datei in einem Datenteil einer mehrteiligen Anfrage. Fügt einen Dateianhang hinzu

Bilder von PDF-Datei-Inhalten hinzufügen

Verwenden Sie <img data-render-src="name:part-name" /> und senden Sie die PDF-Datei im Datenteil einer mehrteiligen Anfrage. Rendert jede PDF-Seite als separates Bild auf der OneNote-Seite.


Dateiattribute

Das Element Objekt benötigt die folgenden Attribute.

Daten-Anlage

Name und Dateierweiterung der Datei, die auf der OneNote-Seite angezeigt werden soll
Beispiel: data-attachment="filename.docx"

data

Der Name des Teils in der mehrteiligen Anforderung, der die Daten der Binärdatei enthält. Das OneNote-API unterstützt hier nicht die Übergabe einer URL-Referenz.
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

Die OneNote-API verwendet ein vordefiniertes Dateitypensymbol für angehängte Dateien oder ein generisches Symbol, wenn die API den Dateityp nicht erkennt. Die folgende Tabelle zeigt einige gängige Dateitypen, 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 für POST-Seiten-Anfragen

Achten Sie beim Senden von Bild- und Dateidaten auf diese Einschränkungen:

  • Die Gesamtgröße des POST beträgt ~70 MB, einschließlich Bilder, Dateien und andere 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.

  • Das Limit für jeden Datenteil beträgt 25 MB, inklusive der Teil-Überschriften. Datenteile, die den Grenzwert überschreiten, werden von der OneNote-API abgelehnt.

  • Die maximale Anzahl der Bilder pro Seite beträgt 150. Bei Verwendung des Attributs src="http://..." ignoriert die API alle Tags des Typs img, die über dieses Limit hinausgehen.

  • Die maximale Anzahl der Datenteile beträgt 6 pro POST, einschließlich des benötigten Teils Präsentation.

  • Jede Anfrage kann bis zu fünf img-Elemente enthalten, die data-render-src und ein Objekt-Element verwenden, welches data-render-srcverwendet. Zusätzliche Bild- und Dateiverweise werden ignoriert.

  • Die maximale Anzahl der Bilder in einem einzelnen POST beträgt 30, unabhängig davon, welche Methode Sie verwenden, um sie an das API zu senden. 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:

  • Komplexes HTML wird wahrscheinlich am besten über data-render-srcan das Rendering-Modul geschickt, anstatt zu versuchen, das HTML so zu modifizieren, dass es vom OneNote-API akzeptiert werden kann. Dies gilt auch, wenn Ihr HTML-Tags enthält, die nicht unterstützt werden.

  • 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 POST Seiten

PlattformBerechtigungsbereich
Consumeroffice.onenote_create, office.onenote_update_by_app, office.onenote_update
UnternehmenNotes.Create, Notes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Berechtigungen für PATCH-Seiten

PlattformBerechtigungsbereich
Consumeroffice.onenote_update_by_app, office.onenote_update
UnternehmenNotes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Weitere Informationen zu Berechtigungsbereichen und deren Funktionsweise finden Sie unter OneNote-Berechtigungsbereiche.

Weitere Ressourcen

© 2018 Microsoft