Render html in Jupyter

Render html in Jupyter.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Render images from HTML in Jupyter "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Before we start, we neet to install the pyppeteer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: pyppeteer in d:\\soft\\python-3.7.0\\lib\\site-packages (0.2.5)\n",
      "Requirement already satisfied: appdirs<2.0.0,>=1.4.3 in d:\\soft\\python-3.7.0\\lib\\site-packages (from pyppeteer) (1.4.4)\n",
      "Requirement already satisfied: tqdm<5.0.0,>=4.42.1 in d:\\soft\\python-3.7.0\\lib\\site-packages (from pyppeteer) (4.61.0)\n",
      "Requirement already satisfied: importlib-metadata<3.0.0,>=2.1.1; python_version < \"3.8\" in d:\\soft\\python-3.7.0\\lib\\site-packages (from pyppeteer) (2.1.1)\n",
      "Requirement already satisfied: pyee<9.0.0,>=8.1.0 in d:\\soft\\python-3.7.0\\lib\\site-packages (from pyppeteer) (8.1.0)\n",
      "Requirement already satisfied: websockets<9.0,>=8.1 in d:\\soft\\python-3.7.0\\lib\\site-packages (from pyppeteer) (8.1)\n",
      "Requirement already satisfied: urllib3<2.0.0,>=1.25.8 in c:\\users\\tcorbu1\\appdata\\roaming\\python\\python37\\site-packages (from pyppeteer) (1.25.11)\n",
      "Requirement already satisfied: zipp>=0.5 in d:\\soft\\python-3.7.0\\lib\\site-packages (from importlib-metadata<3.0.0,>=2.1.1; python_version < \"3.8\"->pyppeteer) (3.4.1)\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "You are using pip version 10.0.1, however version 21.1.2 is available.\n",
      "You should consider upgrading via the 'python -m pip install --upgrade pip' command.\n"
     ]
    }
   ],
   "source": [
    "import sys\n",
    "!pip install pyppeteer"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "than import asyncio, pyppeteer, display, and b64decode"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 49,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "import asyncio\n",
    "import pyppeteer\n",
    "from IPython import display\n",
    "from base64 import b64decode"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "than get the image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "metadata": {},
   "outputs": [],
   "source": [
    "async def main(htmlString):\n",
    "    browser = await pyppeteer.launch()\n",
    "    page = await browser.newPage()\n",
    "    await page.goto('data:text/html,'+htmlString)\n",
    "    imageBytes = await page.screenshot({'encoding' : 'base64'})\n",
    "    await browser.close()\n",
    "    return imageBytes\n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/png": "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gAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAxAgQAAIgRIAAAQIwAAQAAYgQIAAAQI0AAAIAYAQIAAMQIEAAAIEaAAAAAMQIEAACIESAAAECMAAEAAGIECAAAECNAAACAGAECAADECBAAACBGgAAAADECBAAAiBEgAABAjAABAABiBAgAABAjQAAAgBgBAgAAxAgQAAAgRoAAAAAx/wVD4ZTsLQM96wAAAABJRU5ErkJggg==\n",
      "text/plain": [
       "<IPython.core.display.Image object>"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "bytes = await main('<table style=\"border:1px solid blue\"><tr><td>Some Cell</td><td>Some Other cell</td></tr></table>');\n",
    "display.Image(b64decode(bytes))\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}