如何使它们工作-NPM和Sails（html-pdf）

Question

EDIT : Well I'll keep it simple and I'll ask all my other issues in other posts if need be. The original post was way too vast, hoping someone would answer me with a guide through all that needs to be known to use sails to its full potential. Sorry.

First of all, I'm quite new to angular, npm, and sails.js, but I have a very good Javascript base.

All I know about those come from the 'Sails.js in Action' book.

I'm trying to use an npm package (html-pdf to name it), but I can't get it to work.

I need to create a pdf invoice from the webpage.

So I installed the html-pdf package via npm install html-pdf --save into my sails project. Then just to test it out and get it to work, I used my home page which was currently blank and added some text and a 'save as pdf' button.

Here is the ejs homepage code (in views) :

<div ng-controller="homePageCtrl" class="homepage" ng-cloak>
    <div class="container">
      <div class="row">
        <center>
            <br /><h1>Accueil</h1><br /><br />
            <h3>Bienvenue !</h3><br /><br />
            <h3>Test création PDF</h3><br />
            <h4>Si vous avez des questions ou des problèmes,</h4>
            <h4>veuillez contacter l'assistance technique.</h4>
            <br /><br />
            <button class="btn btn-success btn-lg" type="button" ng-click="printPdf()">
              <span>Imprimer</span>
              </button>
        </center>
      </div>
    </div>
  </div>

Now here is the first thing I tried (quite a copy of the example code) for the printPdf function from my assets/js/controllers/homePageCtrl.js :

angular.module('teknik').controller('homePageCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.printPdf = function(){
      var fs = require('fs');
      var pdf = require('html-pdf');
      var html = fs.readFileSync('./views/homepage.ejs', 'utf8');
      var options = { format: 'Letter' };

      pdf.create(html, options).toFile('/pdfs/test.pdf', function(err, res) {
        if (err) return console.log(err);
        console.log(res); 
      });
    };

}]);

It gives me an error on the var fs = require('fs'); line (Can't find variable: require) so I tried a few changes afterward. I found this example Sails EJS-view after html-pdf usage does not render image and tried to change the code to fit my needs but it also gave me an error on the beginning of the code (same error but I don't have that adaptation anymore).

Answer 1

I'm no expert on this topic, but I think I can see exactly the gap in your knowledge that's giving you so much trouble.

npm modules, and most of the documentation that goes with them, are geared towards using the modules in code run on the server . From what I can see in your code above, you are running the code in the client's browser . Npm modules and the whole require framework they use is not set up there.

In Sails, the code you write in your controllers, services, and models (pretty much anything in your /api/ folder is run server-side, so requiring and using npm modules will work there.

Code you put in your /assets/ folder is different. Files here have javascript that is sent (without being run) to the browser on a client machine and run there. Npm modules are not set up to work there.

Sails views are a bit of a confusing case: the templating is done on the server side (all the <% ... %> blocks are evaluated), but none of the javascript outside those blocks is run until a client browser runs it later. For example, event handler code is all client-side.

If you do need libraries etc that run client side, you can do it the "old fashioned" way: add a javascript asset, and link to it from the file where you need to run it, same as jquery, etc. So, if you have the file /assets/js/some_library.js in your project, then in an html file or view, you can add:

<script src="/js/some_library.js"></script>
<script>
    // your custom code here. You can often use
    // variables from the library here as you would
    // after "require"ing them in server-side code
</script>

Npm can be an awkward place to find scripts to use in this way. Sometimes you can dig into the npm folder and find a file in a lib or dist folder that you can use like I've used some_library.js above, but not always. There is probably a more browser-oriented source for any of the functions you are trying to get from npm.

Hope this helps!