Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: get the html file instead of printing it #4

Closed
imambungo opened this issue Oct 12, 2019 · 2 comments
Closed

Feature request: get the html file instead of printing it #4

imambungo opened this issue Oct 12, 2019 · 2 comments

Comments

@imambungo
Copy link

Having an option to get the Html file would be great.

@jerry1100
Copy link
Owner

I feel that this is a pretty niche scenario so unless there's visible demand, I don't want to overcomplicate the functionality.

However, it is possible and fairly easy to do.

Step 1 - Navigate to the page you want to print

Any page with a markdown preview will work (including wikis). Issue and pull request threads won't work.

Step 2 - Open your devtools and paste this in the console

This applies the exact styles as GMP when it prepares the page for printing, with the only exception being the padding here to create some page margins.

const style = document.createElement('style');

style.innerHTML = `
  div.position-relative {
    position: static !important;
  }

  body * {
    visibility: hidden !important;
    position: static !important;
  }

  #wiki-body > .markdown-body,
  article.markdown-body.entry-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 50px !important; // adjust as needed
    border: none !important;
  }

  #wiki-body > .markdown-body *,
  article.markdown-body.entry-content * {
    visibility: visible !important;
  }

  #wiki-body > .markdown-body pre,
  article.markdown-body.entry-content pre {
    white-space: pre-wrap !important;
  }
`;

document.head.appendChild(style);

Step 3 - When you're ready to print, paste this into your devtools' console

This actually downloads the html. Credit goes to Louis on StackOverflow.

        var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" });
        var URL = window.webkitURL || window.URL;

        // This is the URL that will download the data.
        var downloadUrl = URL.createObjectURL(file);

        var a = document.createElement("a");
        // This sets the file name.
        a.download = "source.htm";
        a.href = downloadUrl;

        // Actually perform the download.
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

@imambungo
Copy link
Author

Okay, no problem. Thank you for giving the workaround 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants