OpenCerts / opencerts-website

Apache License 2.0
21 stars 70 forks source link

How to listen print action in remote renderer #460

Closed nikhilranosys closed 4 years ago

nikhilranosys commented 4 years ago

I have implemented remote renderer with updated structure and want to implement my own print action suggested on this link: https://github.com/OpenCerts/opencerts-website/issues/444#issuecomment-558474653

But I am not sure how to listen parent's print action in iframe.

Nebulis commented 4 years ago

How do you connect through the frame:

If you are unsure, feel free to provide a link to your code so that I can help you through it

nikhilranosys commented 4 years ago

Here is my code repo link: https://github.com/nikhilranosys/demo-opencerts-renderer/tree/smu-templates-new

Nebulis commented 4 years ago

You are using FramedDocumentRenderer, it should work, isnt it the case ?

Could you upgrade @govtechsg/decentralized-renderer-react-components to latest version ? 1.2.1

nikhilranosys commented 4 years ago

Yes, print is working but pages are faded because of the default watermark. I want to add my own watermark thats why want to listen print action.

Nebulis commented 4 years ago

ok Upgrade to 1.2.1 it should fix that problem (that was the fix reason)

nikhilranosys commented 4 years ago

I have already upgraded to 1.2.1 but still getting same issue. It is showing gray layer in print version though I have different watermark set on my page.

Nebulis commented 4 years ago

How do you print?

nikhilranosys commented 4 years ago

Using the print button.

Nebulis commented 4 years ago

It should work, I will try with your repository but in the meantime make sure your local version of opencerts-website is up to date as well

Nebulis commented 4 years ago

Feel free to remove whatever is related to govtech (for instance govtech examples in src/templates/govtechDemoCert)

Nebulis commented 4 years ago

I just tried with latest opencerts-website and your branch, and didn't face the issue.

However I couldn't see your Watermark as well. I had to do the following change:

export const PrintWatermark: FunctionComponent = () => (
  <div
    css={css`
      width: 0;
      height: 0;
      opacity: 0;
      display: none;
      position: absolute;
      background-color: blue;
      background-repeat: repeat;
      z-index:1000;

      @media print {
        width: 100%;
        height: 100%;
        opacity: 0.6;
        display: block;
      }
    `}
    className="print-only"
  />
);

(adding z-index L14)

This is what I get locally image Printed from my local opencerts (latest version) using your branch and the line I added

nikhilranosys commented 4 years ago

Thanks for the update. Now it is working perfactly fine when I run with npm run start.

But when I try to export using npm run start:static I am getting below error:

[   =] Exporting (0/9)
Error occurred prerendering /collaborate: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)

Error occurred prerendering /registry: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
[  ==] Exporting (2/9)
Error occurred prerendering /privacy: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)

Error occurred prerendering /terms: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)

Error occurred prerendering /collaborators-terms: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
[ ===] Exporting (5/9)
Error occurred prerendering /faq: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)

Error occurred prerendering /404.html: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
[=   ] Exporting (7/9)
Error occurred prerendering /viewer: Error: Module did not self-register.
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:840:18)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\scrypt\index.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
Exporting (9/9)
Error: Export encountered errors
    at _default (D:\Local Disk\New\Desktop\Projects\smu\opencerts\opencerts-website\node_modules\next\dist\export\index.js:14:1048)
[    ] Exporting (9/9)npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! opencerts-website@2.0.0 export: `next export`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the opencerts-website@2.0.0 export script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nikhil Gaur\AppData\Roaming\npm-cache\_logs\2019-12-10T11_46_43_850Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! opencerts-website@2.0.0 build:static: `next build && npm run export`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the opencerts-website@2.0.0 build:static script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nikhil Gaur\AppData\Roaming\npm-cache\_logs\2019-12-10T11_46_43_975Z-debug.log

2019-12-10T11_46_43_975Z-debug.log

Nebulis commented 4 years ago

I'm not sure what's going on, There are some issues that could be related on next repo (https://github.com/zeit/next.js/issues?utf8=%E2%9C%93&q=Module+did+not+self-register)

I cant reproduce on my machine (linux)

What are you trying to achieve ? (why do you build opencerts yourself)