FIO-9537: fixed rendering PDFs in html format

gulpfile.js

@@ -1,12 +1,17 @@
 var gulp = require('gulp');
 var plugins = require('gulp-load-plugins')();
 var del = require('del');
+var replace = require('gulp-replace');
+var bootstrapIconsVersion = require('./node_modules/bootstrap-icons/package.json').version;
 gulp.task('clean', () => del(['dist/*', 'lib/*']));
-gulp.task('html', () => gulp.src('./src/index.html').pipe(plugins.htmlmin({
-  collapseWhitespace: true,
-  minifyCSS: true,
-  minifyJS: true
-})).pipe(gulp.dest('dist')));
+gulp.task('html', () => gulp.src('./src/index.html')
+  .pipe(replace('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@' + bootstrapIconsVersion +'/font/bootstrap-icons.min.css'))
+  .pipe(plugins.htmlmin({
+    collapseWhitespace: true,
+    minifyCSS: true,
+    minifyJS: true
+  }))
+  .pipe(gulp.dest('dist')));
 gulp.task('assets', () => gulp.src('./src/assets/**/*.*', { encoding: false }).pipe(gulp.dest('dist/assets')));
 gulp.task('flatpickr', () => gulp.src('./node_modules/flatpickr/dist/**/*', { encoding: false }).pipe(gulp.dest('dist/lib/flatpickr')));
 gulp.task('formiojs', () => gulp.src('./node_modules/@formio/js/dist/**/*', { encoding: false }).pipe(gulp.dest('dist/lib/formiojs')));
@@ -26,3 +31,8 @@ gulp.task('build', gulp.parallel(
   'bootswatch',
   'moment-timezone'
 ));
+gulp.task('inlinesource', function () {
+  return gulp.src('./dist/*.html')
+    .pipe(plugins.inlineSource())
+    .pipe(gulp.dest('./dist'));
+});

package.json

@@ -4,7 +4,7 @@
   "description": "A Form.io form viewer application",
   "main": "index.js",
   "scripts": {
-    "build": "gulp clean && tsc --project tsconfig.json && gulp build && webpack --config webpack.config.js",
+    "build": "gulp clean && tsc --project tsconfig.json && gulp build && webpack --config webpack.config.js && gulp inlinesource",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -41,6 +41,7 @@
     "gulp-load-plugins": "^2.0.8",
     "gulp-minify-css": "^1.2.3",
     "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.4",
     "gulp-s3": "^0.11.0",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "^3.0.2",

src/index.html

@@ -4,25 +4,25 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="lib/bi/bootstrap-icons.min.css" />
-    <link rel="stylesheet" href="lib/flatpickr/flatpickr.min.css" />
-    <link rel="stylesheet" href="lib/formiojs/formio.form.min.css" />
+    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" inline/>
+    <link id="bootstrap-icon-styles" rel="stylesheet" href=""/>
+    <link rel="stylesheet" href="lib/flatpickr/flatpickr.min.css" inline/>
+    <link rel="stylesheet" href="lib/formiojs/formio.form.min.css" inline/>
     <script id="header-template" type="text/template">
         <nav class="navbar navbar-expand-lg navbar-light bg-light d-print-block">
             <div class="container-fluid">
                 <span class="navbar-brand d-flex align-items-center" id="form-title">
-                    <img src="assets/logo.png" class="d-inline-block align-text-top me-2" style="height: 1.3em;" /><span>Form Viewer</span>
+                  <img src="assets/logo.png" inline class="d-inline-block align-text-top me-2" style="height: 1.3em;" /><span>Form Viewer</span>
                 </span>
             </div>
         </nav>
     </script>
     <script id="branding" type="text/template"><hr /><h4 class="text-center text-muted">powered by <img src="assets/logo.png" style="height: 1.2em;" /></h4></script>
     <script id="srcform" type="text/template"><div class="well src-form"><div class="form-group"><label for="formsrc">Form Embed URL</label><input type="text" class="form-control mb-2" id="formsrc" name="formsrc" placeholder="https://examples.form.io/example"></div><button type="submit" class="btn btn-primary" id="setsrc"><span class="glyphicon glyphicon-check" id="btnicon"></span> Show Form</button></div></script>
     <script id="loader" type="text/template"><div class="loader-wrapper"><div class="loader text-center"></div></div></script>
-    <script src="lib/flatpickr/flatpickr.min.js"></script>
-    <script src="lib/formiojs/formio.form.min.js"></script>
-    <script src="lib/seamless/seamless.child.min.js"></script>
+    <script src="lib/flatpickr/flatpickr.min.js" inline></script>
+    <script src="lib/formiojs/formio.form.min.js" inline></script>
+    <script src="lib/seamless/seamless.child.min.js" inline></script>
     <script type="text/javascript">
       var query = {};
       var parts = [];
@@ -205,6 +205,9 @@
 </head>
 <body>
 <script type="text/javascript">
+  document.getElementById('bootstrap-icon-styles').href = query.format === 'html' 
+    ? 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css' 
+    : 'lib/bi/bootstrap-icons.min.css';
   var bodyClass = '';
   if ((!query.hasOwnProperty('header') || parseInt(query.header, 10)) && query.format !== 'html') {
     document.write(document.getElementById('header-template').innerHTML);